<template>
  <div class="qjzl">
    <timePicker @timeChange="timeChangeFn"/>
    <!-- 左 -->
    <div class="qjzlleft">
      <div class="zjzl-box">
        <div class="mode-title" :style="`background:url(${bgImg[0]})`"></div>
        <div class="main">
          <div class="list-one">
            <div
              class="list-one-item"
              v-for="(item, index) in NewZjzl.listOne"
              :key="item.title"
            >
              <div class="title fs-16 fw-600">{{ item.title }}</div>
              <div class="num">
                <div class="text">
                  <div class="fs-24 main-color fw-600">
                    <!-- <count-to
                      :startVal="0"
                      :endVal="Number(item.num)"
                      :duration="3000"
                    ></count-to
                  > -->
                    <my-tooltip
                      v-show="!index"
                      tooltipBoxStyle="left: -10px;top:30px;width: 120px"
                      :numData="numData1"
                      :popData="popData1"
                    />
                    <my-tooltip
                      v-show="index === 1"
                      tooltipBoxStyle="left: -10px;top:30px;width: 120px"
                      :numData="numData2"
                      :popData="popData2"
                    />
                  </div>
                  <!-- <span class="fs-14">{{ item.unit }}</span> -->
                </div>
                <!-- <div class="per">
                  <span class="fs-14">{{ item.title2 }}</span>
                  <span
                    class="fs-14 main-color ml-5 mr-5"
                    v-if="item.per != '-'"
                  >
                    <count-to
                      :startVal="0"
                      :endVal="Number(item.per)"
                      :duration="3000"
                      :decimals="2"
                    ></count-to
                    >%</span
                  >
                  <span v-if="item.per == '-'" class="main-color">
                    &nbsp; -
                  </span>
                  <span v-if="item.title2 === '增幅' && item.per != '-'">
                    <img
                      v-if="item.per > 0"
                      src="../../assets/common-new/red-top.png"
                      alt=""
                    />
                    <img
                      v-else
                      src="../../assets/common-new/green-down.png"
                      alt=""
                    />
                  </span>
                </div> -->
              </div>
            </div>
          </div>
          <!-- <div class="list-two">
            <div
              class="list-two-item"
              v-for="item in NewZjzl.listTwo"
              :key="item.title"
              style="position: relative"
            >
              <div style="position: absolute; top: 0; width: 130px">
                <span class="fs-24 main-color">
                  <count-to
                    :startVal="0"
                    :endVal="Number(item.num)"
                    :duration="3000"
                  ></count-to
                ></span>
              </div>
              <div>
                <img src="../../assets/qjzl-new/new/Group 1469.png" alt="" />
              </div>
              <div class="fs-16 fw-600">{{ item.title }}</div>
            </div>
          </div> -->
          <div class="xzxk-linetwo" style="margin-top: 10px">
            <!-- 零售户净增 -->
            <div class="retailer-increase-box">
              <div class="title">
                {{  NewXzxk.title }}
              </div>
              <div id="retailer-increase-bar"></div>
            </div>
          </div>

          <div class="list-two">
            <div v-if="showLateAcceptPop" class="late-accept-pop">
              <div class="content">
                <div class="title">
                  <div style="width: 15%" class="fw-600">市局</div>
                  <div style="width: 40%" class="fw-600">区县局</div>
                  <div style="width: 15%" class="fw-600">申请人姓名</div>
                  <div style="width: 15%" class="fw-600">办理时长</div>
                  <div style="width: 15%" class="fw-600">超期环节</div>
                </div>
                <div class="num">
                  <vue-seamless-scroll
                    class="scroll-box"
                    :data="lateAcceptData"
                    :class-option="scrollOption"
                  >
                    <div
                      v-for="(item, index) in lateAcceptData"
                      class="item"
                      :key="index"
                    >
                      <div style="width: 15%">{{ item.city_org_name }}</div>
                      <div style="width: 40%">{{ item.county_org_name }}</div>
                      <div style="width: 15%">
                        {{ item.current_processor_name }}
                      </div>
                      <div style="width: 15%">{{ item.zm_devide_days }}</div>
                      <div style="width: 15%">{{ item.bcb_name }}</div>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div v-if="showLateAcceptPop2" class="late-accept-pop late-handle">
              <div class="content">
                <div class="title">
                  <div class="fw-600">市局</div>
                  <div style="width: 40%" class="fw-600">区县局</div>
                  <div class="fw-600">申请人姓名</div>

                  <div class="fw-600">超期环节</div>
                </div>
                <div class="num">
                  <vue-seamless-scroll
                    class="scroll-box"
                    :data="lateAcceptData2"
                    :class-option="scrollOption"
                  >
                    <div
                      v-for="(item, index) in lateAcceptData2"
                      class="item"
                      :key="index"
                    >
                      <div>{{ item.CITY_ORG_NAME }}</div>
                      <div style="width: 40%">{{ item.COUNTY_ORG_NAME }}</div>
                      <div>{{ item.manager_name }}</div>
                      <!-- <div>{{ item.zm_devide_days }}</div> -->
                      <div>{{ item.bcb_name }}</div>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div
              class="list-two-item"
              :style="item.pop ? 'cursor: pointer;' : ''"
              v-for="(item, index) in manageQE"
              @click="lateAcceptPop(item.pop, item.title)"
              :key="index"
            >
              <div>
                <span class="fs-20" :class="item.color">
                  <count-to
                    :startVal="0"
                    :endVal="Number(item.num)"
                    :duration="3000"
                    :decimals="item.decimals"
                    :suffix="item.suffix"
                  ></count-to
                ></span>
              </div>
              <div>
                <img src="../../assets/qjzl-new/new/xzxk-bg5.png" alt="" />
              </div>
              <div class="fs-14 fw-600 title">{{ item.titles[0] }}</br>{{item.titles[1]}}</div>
            </div>
          </div>
          <div class="list-two" style="margin-top:20px">
            <div
              class="list-two-item"
              v-for="item in NewZjzl.listTwo"
              :key="item.title"
              style="position: relative"
            >
              <div style="position: absolute; top: 0; width: 130px">
                <span class="fs-24 main-color">
                  <count-to
                    :startVal="0"
                    :endVal="Number(item.num)"
                    :duration="3000"
                  ></count-to
                ></span>
              </div>
              <div>
                <img src="../../assets/qjzl-new/new/Group 1469.png" alt="" />
              </div>
              <div class="fs-16 fw-600">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="blqk-box">
        <div
          class="mode-title"
          :style="`background:url(${bgImg[1]});margin-top:10px`"
        ></div>
        <div class="main">
          <div class="mode1">
            <div
              class="hoverpointer"
              @click="showLateAcceptPop3 = !showLateAcceptPop3"
            >
              <div v-if="showLateAcceptPop3" class="late-accept-pop">
                <div class="content">
                  <div class="title">
                    <div style="width: 20%" class="fw-600">今日时间</div>
                    <div style="width: 40%" class="fw-600">单位</div>
                    <div style="width: 5%" class="fw-600">类型</div>
                    <div style="width: 35%" class="fw-600">申请渠道</div>
                  </div>
                  <div class="num">
                    <vue-seamless-scroll
                      class="scroll-box"
                      :data="lateAcceptData"
                      :class-option="scrollOption"
                    >
                      <div
                        v-for="(item, index) in config.data"
                        class="item"
                        :key="index"
                      >
                        <div style="width: 20%">{{ item.decide_date }}</div>
                        <div style="width: 40%">{{ item.org_short_name }}</div>
                        <div style="width: 5%">{{ item.apply_type_name }}</div>
                        <div style="width: 35%">
                          {{ item.channel_sys_name }}
                        </div>
                      </div>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
              <img src="../../assets/xzxk-new/blqk/sq-title.png" alt="" />
            </div>
            <div class="content">
              <div
                class="content-item"
                v-for="(item, index) in NewBlqk.listOne"
                :key="index"
              >
                <span class="fw-600">{{ item.title }}</span>
                <span class="fs-20 fw-600 main-color">
                  <count-to
                    :startVal="0"
                    :endVal="Number(item.num)"
                    :duration="3000"
                  ></count-to
                ></span>
              </div>
            </div>
          </div>
          <div class="mode2">
            <div>
              <img src="../../assets/xzxk-new/blqk/zq-title.png" alt="" />
            </div>
            <div class="content">
              <div
                class="content-item"
                v-for="(item, index) in NewBlqk.listTwo"
                :key="index"
              >
                <span class="fw-600">{{ item.title }}</span>
                <span class="fs-20 fw-600 main-color">
                  <count-to
                    :startVal="0"
                    :endVal="Number(item.num)"
                    :duration="3000"
                  ></count-to
                ></span>
              </div>
            </div>
            <!-- <div class="content2 mt-10" v-if="showScroll">
              <dv-scroll-board
                class="blqk-pop"
                :config="config"
                style="width: 100%; height: 180px"
              />
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 中 -->
    <div class="qjzlcenter">
      <div class="center-map">
        <!-- <div
          class="map-title"
          v-on:click="mapBack()"
          :style="`background:url(${bgImg[6]});width:100%;height:40px;background-size:100% 100% !important`"
        ></div> -->

        <div class="map-title">
          <span
            style="margin-left: 10px"
            v-for="(item, index) in clickArea"
            :key="item"
          >
            <!-- <img src="../../assets/common-new/back.png" alt="" /> -->
            <div class="prov" @click="mapBack(index)">
              {{ item }} <span v-if="index != clickArea.length - 1"> / </span>
            </div>
          </span>
        </div>
        <img style="width: 150px;height: 150px;position: absolute;margin-top: 40px;margin-left:32px;" src="../../assets/xzxk-new/mapImg.png" alt="">
        <div class="annotation">
          <div class="title" style="margin-left:25px">"5+5"</div>
          <div class="content" style="margin-top:10px"> <img
                      style="width:16px;height: 16px;"
                        src="../../assets/qjzl-new/centerMap/icon.png"
                        alt=""
                      /> <span>5日办理零售许可证</span></div>
          <div class="content" style="margin-top:10px"> <img
                      style="width:16px;height: 16px;"
                        src="../../assets/qjzl-new/centerMap/icon.png"
                        alt=""
                      /> <span>5日入网可订货</span></div>
        </div>
        <custom-list
          v-if="titleMap.level==1"
          position="right"
          :title="listTitle"
          :columns="listColumns"
          :items="listItems"
        />
        <!-- <div class="now-time">
          <div class="time">
            {{ nowTime }}
          </div>
        </div> -->
        <anhuiMap
          :data="data"
          :zoom="1.15"
          :formatterCustom="formatterCustom"
        ></anhuiMap>
      </div>
      <div class="center-bottom">
        <div class="xkrl-box">
          <div
            class="mode-title"
            :style="`background:url(${bgImg[2]});background-size:100% 100% !important`"
          ></div>
          <div class="main">
            <div class="btn">
              <div
                :class="
                  activeRlxkIndex === index ? 'btn-item-active' : 'btn-item'
                "
                v-for="(item, index) in rlxkBtn"
                :key="index"
                @click="toggleBtn(index)"
              >
                <img
                  v-if="!index"
                  style="width: 10px; height: 10px; margin-right: 5px"
                  src="../../assets/common-new/nation-icon.png"
                  alt=""
                />
                <img
                  v-if="index === 2"
                  style="width: 10px; height: 10px; margin-right: 5px"
                  src="../../assets/common-new/nation-icon.png"
                  alt=""
                />
                {{ item }}
              </div>
            </div>
            <!-- 容量echarts -->
            <div v-if="!activeRlxkIndex" class="rl">
              <div class="rl-left">
                <div
                  class="rl-left-item"
                  v-for="(item, index) in lsxkrl.rlList"
                  :key="index"
                >
                  <span class="fs-16 fw-600"> {{ item.title }}</span>
                  <span style="width: 48%">
                    
                    <span class="fs-16 fw-600 main-color">
                      <!-- <count-to
                        v-if="index"
                        :startVal="0"
                        :endVal="Number(item.num)"
                        :duration="3000"
                        :decimals="item.decimals"
                        :suffix="item.suffix"
                      ></count-to> -->
                      <span>{{ item.num }}</span>
                    </span>
                    <!-- <span
                      class="fs-14"
                      :class="item.unit === '‰' ? 'main-color' : ''"
                      >{{ item.unit }}</span
                    > -->
                  </span>
                </div>
              </div>
              <div class="rl-right">
                <div
                  id="rl-pie"
                  key="rl"
                  style="width: 150px; height: 150px"
                ></div>
              </div>
            </div>
            <!-- 趋势分析echarts -->
            <div v-if="activeRlxkIndex === 1" class="qsfx">
              <div
                id="qsfx-line"
                key="qsfx"
                style="width: 400px; height: 180px"
              ></div>
            </div>
            <div v-if="activeRlxkIndex === 2" class="jylh">
              <div class="list-two">
                <div v-show="showJylhPop" class="late-uncheck-pop">
                  <div class="content">
                    <div class="title">
                      <div class="fw-600">序号</div>
                      <div class="fw-600">申请时间</div>
                      <div class="fw-600">区域名称</div>
                      <div class="fw-600">申请人</div>
                      <div class="fw-600">企业名称</div>
                      <div class="fw-600">排队时长</div>
                    </div>
                    <div class="num">
                      <vue-seamless-scroll
                        class="scroll-box"
                        :data="jylhListData"
                        :class-option="scrollOption"
                      >
                        <div
                          v-for="(item, index) in jylhListData"
                          class="item"
                          :key="index"
                        >
                          <div>{{ item.a }}</div>
                          <div>{{ item.b }}</div>
                          <div>{{ item.c }}</div>
                          <div>{{ item.d }}</div>
                          <div>{{ item.e }}</div>
                          <div>{{ item.f }}</div>
                        </div>
                      </vue-seamless-scroll>
                    </div>
                  </div>
                </div>
                <div
                  class="list-two-item hoverpointer"
                  v-for="(item, index) in jylhList"
                  :key="index"
                  @click="showJylhPopFn(index)"
                >
                  <div>
                    <span class="fs-24 main-color">
                      <count-to
                        :startVal="0"
                        :endVal="Number(item.num)"
                        :duration="3000"
                      ></count-to
                    ></span>
                  </div>
                  <div>
                    <img src="../../assets/qjzl-new/xzxk/scjg-pad.png" alt="" />
                  </div>
                  <div class="title fs-16 fw-600">{{ item.title }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="zxpj-box">
          <div
            class="mode-title"
            :style="`background:url(${bgImg[3]});background-size:100% 100% !important`"
          ></div>
          <div class="main">
            <div class="btn">
              <div
                :class="
                  activeRlxkIndex2 === index ? 'btn-item-active' : 'btn-item'
                "
                style="width:33%;margin-left:-12px"
                v-for="(item, index) in zxpjBtn"
                :key="index"
                @click="toggleBtn2(index)"
              >
                <img
                  v-if="index === 2"
                  style="width: 10px; height: 10px; margin-right: 5px"
                  src="../../assets/common-new/prov-icon.png"
                  alt=""
                />
                {{ item }}
              </div>
            </div>
            <!-- 好差评echarts -->
            <div class="content">
              <div v-if="activeRlxkIndex2 === 0">
                <div id="hcp-box" style="width: 400px; height: 180px"></div>
              </div>
              <!-- 咨询投诉echarts -->
              <div v-else-if="activeRlxkIndex2 === 1" class="tsjb-box">
                <div
                  id="tsjb-box"
                  style="width: 400px; height: 180px"
                  :key="1"
                ></div>
              </div>
              <!-- 5+5 -->
              <div v-else-if="activeRlxkIndex2 === 2" class="five-box">
                <div
                  class="num"
                  style="
                    width: 400px;
                    height: 30px;
                    font-size: 12px;
                    line-height: 20px;
                  "
                >
                  <div class="mr-10">
                    <span>达标率：</span
                    ><span class="main-color">
                      <count-to
                        :startVal="0"
                        :endVal="Number(fiveAndFiveData.dbl)"
                        :duration="3000"
                        :decimals="2"
                      ></count-to
                      >%</span
                    >
                  </div>
                  <div class="hoverpointer">
                    <span>平均入网可订货时长(天)：</span>
                    <div class="main-color">
                      <!-- <count-to
                        :startVal="0"
                        :endVal="Number(fiveAndFiveData.pjrwsj)"
                        :duration="3000"
                        :decimals="2"
                      ></count-to
                    > -->
                      <my-tooltip
                        tooltipBoxStyle="left: -135px;top:23px;width: 300px"
                        :numData="numData3"
                        :popData="popData3"
                      />
                    </div>
                  </div>
                  <!-- <div class="area">
                    <span>地区选择：</span>
                    <div>
                      <el-select v-model="selectArea" placeholder="请选择">
                        <el-option
                          v-for="(item, index) in areaList"
                          :key="index"
                          :label="item.name"
                          :value="item.name"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div> -->
                </div>
                <div
                  id="five-and-five-box"
                  style="width: 400px; height: 180px"
                  :key="2"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右 -->
    <div class="qjzlright">
      <div class="zjzl-box">
        <div class="mode-title" :style="`background:url(${bgImg[7]})`"></div>
        <div class="db-box">
          <div class="btn">
            <div
              style="width:50% !important;margin-left:-16px"
              :class="activeDbIndex === index ? 'btn-item-active' : 'btn-item'"
              v-for="(item, index) in dbBtn"
              :key="index"
              @click="toggleBtn4(index)"
            >
              {{ item }}
            </div>
          </div>
          <div v-show="!activeDbIndex" class="db-one-box">
            <div id="db-one-bar" style="width: 95%; height: 180px"></div>
          </div>
          <div v-show="activeDbIndex === 1" class="db-two-box">
            <!-- <div id="retailer-increase-bar"></div> -->
            <div id="db-two-bar" style="width: 95%; height: 180px"></div>
          </div>
        </div>
        <div class="mode-title" :style="`background:url(${bgImg[4]})`"></div>

        <div class="main zhgl-box" style="background: none;height:280px">
          <div class="btn">
            <div
              style="width:50% !important;margin-left:-16px"
              :class="
                activeZhglIndex === index ? 'btn-item-active' : 'btn-item'
              "
              v-for="(item, index) in zhglBtn"
              :key="index"
              @click="toggleBtn3(index)"
            >
              {{ item }}
            </div>
          </div>

          <!-- 零售业态 -->
          <div v-show="!activeZhglIndex" class="xzkx retail-format">
            <div class="lm-center">
              <!-- <div class="lm-top"></div> -->
              <retail-format
                ref="retailFormat"
                @retailerIntro="getRetailerIntro"
                @retailerIntroHide="getRetailerIntroHide"
                style="height: 130px; margin-top: 10px"
                :retailFormatData="retailFormatData"
                :retailFormatEachrt="retailFormatEachrt"
                totStyle="width: 90px;top: 44px;left: 15px;"
              ></retail-format>

              <img
                v-show="retailerIntroImg === 0"
                class="intro1"
                src="../../assets/qjzl-new/xzxk/pop/1.png"
                alt=""
              />
              <img
                v-show="retailerIntroImg === 1"
                class="intro2"
                src="../../assets/qjzl-new/xzxk/pop/2.png"
                alt=""
              />
              <img
                v-show="retailerIntroImg === 2"
                class="intro3"
                src="../../assets/qjzl-new/xzxk/pop/3.png"
                alt=""
              />
              <img
                v-show="retailerIntroImg === 3"
                class="intro4"
                src="../../assets/qjzl-new/xzxk/pop/4.png"
                alt=""
              />
              <img
                v-show="retailerIntroImg === 4"
                class="intro5"
                src="../../assets/qjzl-new/xzxk/pop/5.png"
                alt=""
              />
              <img
                v-show="retailerIntroImg === 5"
                class="intro6"
                src="../../assets/qjzl-new/xzxk/pop/6.png"
                alt=""
              />
            </div>
          </div>
          <!-- <div class="list-one-title">
            <img src="../../assets/xzxk-new/zhgl/title3.png" alt="" />
          </div> -->
          <div
            v-show="activeZhglIndex === 1"
            class="list-thr"
            style="position: relative"
          >
            <div
              key="qtlx"
              id="echartsPie"
              style="margin-top: 10px;height: 130px; padding: 10px 10px 0 10px"
            ></div>
            <div
              class="tot"
              style="
                position: absolute;
                text-align: center;
                width: 90px;
                bottom: -10px;
                left: 26px;
              "
            >
              <div style="color: #42c7de; font-size: 18px; font-weight: 600">
                {{ groupTypeTot }}<span class="fs-12 white-color">(户)</span>
              </div>
              <!-- <div style="color: #fff; font-size: 14px; font-weight: 600">
                总户数
              </div> -->
            </div>
          </div>
          <div class="list-one-title">
            <img src="../../assets/xzxk-new/zhgl/title2.png" alt="" />
          </div>
          <div class="list-two" style="justify-content:space-around">
            <div
              class="list-one-item"
              v-for="(item, index) in NewZHGL.listTwo"
              :key="index"
            >
              <div class="title fs-16 fw-600">{{ item.title }}</div>
              <div class="num">
                <div class="text">
                  <span class="fs-24 main-color fw-600">
                    <!-- <count-to
                      :startVal="0"
                      :endVal="Number(item.num)"
                      :duration="3000"
                    ></count-to
                  > -->
                    <my-tooltip
                      v-show="!index"
                      tooltipBoxStyle="left: -16px;top:23px;width: 120px"
                      :numData="numData4"
                      :popData="popData4"
                    />
                    <my-tooltip
                      v-show="index === 1"
                      tooltipBoxStyle="left: -45px;top:23px;width: 120px"
                      :numData="numData5"
                      :popData="popData5"
                    />
                  </span>
                  <!-- <span class="fs-14">(户)</span> -->
                </div>
                <div class="title2">
                  <span class="fs-14 fw-600">{{ item.title2 }}</span>
                </div>
                <!-- <div class="per fs-14">
                  <span>占比</span>&nbsp;&nbsp;
                  <span class="main-color" v-if="item.per != '-'"
                    ><count-to
                      :startVal="0"
                      :endVal="Number(item.per)"
                      :duration="3000"
                      :decimals="2"
                    ></count-to
                    >%</span
                  >
                  <span v-if="item.per == '-'">-</span>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="zjzl-box mt-10" >
        <div class="mode-title" :style="`background:url(${bgImg[5]})`"></div>
        <div class="main" style="padding-top:10px;">
          <div class="list-two">
            <div
              class="list-two-item"
              v-for="item in NewDzyjy.list"
              :key="item.title"
            >
              <div>
                <span class="fs-24 main-color">
                  <count-to
                    :startVal="0"
                    :endVal="Number(item.num)"
                    :duration="3000"
                  ></count-to
                ></span>
              </div>
              <div><img src="../../assets/qjzl-new/xzxk/bg2.png" alt="" /></div>
              <div class="fs-16 fw-600">{{ item.title }}</div>
            </div>
          </div>
          <div class="echarts-content">
            <div class="left">
              <div id="pie2" style="width: 150px; height: 150px"></div>
            </div>
            <div class="right">
              <div id="pie3" style="width: 150px; height: 150px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headtit from "../../components/title/title.vue";
import anhuiMap from "@/components/echart/anhuiMap";
import framemain from "../../components/frame/frame.vue";

import imgtb1 from "../../assets/img/tb-1.png";
import imgtb2 from "../../assets/img/tb-2.png";

import axios from "axios";
import echartsbar from "./echartsbar.vue";
import tousu from "./tousu.vue";
import xuke from "./xuke.vue";

import { formatMaxNum, formatMinNum } from "@/utils/index.js";

// new
import {
  getLicOverview,
  getLicHanding,
  getLicTotalManagement,
  getLicECigar,
  getLicCapacity,
  getLicMapData,
  getLicCountyMapData,
  getLicenseFiveFive,
  getCapacity,
  getFiveAndFiveList,
  getBmkData,
  getHomeAmplifyCityData,
  getHomeAmplifyCountyData,
} from "@/api/lic.js";
import {
  getHomeHoldLicenseNum,
  getHomeFiveFive,
  getHomeLicPlace,
  getHomeTimeOut,
  getHomeListJuniorData,
} from "@/api/qjzl.js";
import { getRetailTotal } from "@/api/market.js";
import { getPrevMonth } from '@/utils/index.js'
import retailFormat from "@/components/regulation/retailFormat";
import timePicker from "@/components/timePicker/index.vue";
import CustomList from "@/components/mapList/mapList.vue";
export default {
  data() {
    return {
      listTitle: "",
      listColumns: [],
      listItems: [
        // 添加更多的数据
      ],
      showScroll: false,
      //质效评价
      goodBadData: [],
      complainData: {
        month: ["5月", "6月", "7月", "8月", "9月"],
        czlNumber: [98.98, 99.19, 98.31, 99.07, 99.36],
        overTimeNumber: [23, 23, 29, 25, 14],
        totalityNumber: [492, 496, 532, 535, 468],
        verifyNumber: [5, 4, 9, 5, 3],
      },
      //地图区域
      clickArea: ["安徽省"],
      columnName: "prov_org_uuid",
      titleMap: {
        name: "安徽省",
        uuid: "00000000000000000000000011340001",
        level: 1,
        oldName: "安徽省",
        countyUuid: "",
        cityUuid:'',
      },
      dataMaps: {
        安徽省: 340000,
        合肥市: 340100,
        瑶海区: 340102,
        庐阳区: 340103,
        蜀山区: 340104,
        包河区: 340111,
        长丰县: 340121,
        肥东县: 340122,
        肥西县: 340123,
        庐江县: 340124,
        巢湖市: 340181,
        芜湖市: 340200,
        镜湖区: 340202,
        鸠江区: 340207,
        弋江区: 340209,
        湾沚区: 340210,
        繁昌区: 340211,
        南陵县: 340223,
        无为市: 340281,
        蚌埠市: 340300,
        龙子湖区: 340302,
        蚌山区: 340303,
        禹会区: 340304,
        淮上区: 340311,
        怀远县: 340321,
        五河县: 340322,
        固镇县: 340323,
        淮南市: 340400,
        大通区: 340402,
        田家庵区: 340403,
        谢家集区: 340404,
        八公山区: 340405,
        潘集区: 340406,
        凤台县: 340421,
        寿县: 340422,
        马鞍山市: 340500,
        花山区: 340503,
        雨山区: 340504,
        博望区: 340506,
        当涂县: 340521,
        含山县: 340522,
        和县: 340523,
        淮北市: 340600,
        杜集区: 340602,
        相山区: 340603,
        烈山区: 340604,
        濉溪县: 340621,
        铜陵市: 340700,
        铜官区: 340705,
        义安区: 340706,
        郊区: 340711,
        枞阳县: 340722,
        安庆市: 340800,
        迎江区: 340802,
        大观区: 340803,
        宜秀区: 340811,
        怀宁县: 340822,
        太湖县: 340825,
        宿松县: 340826,
        望江县: 340827,
        岳西县: 340828,
        桐城市: 340881,
        潜山市: 340882,
        黄山市: 341000,
        屯溪区: 341002,
        黄山区: 341003,
        徽州区: 341004,
        歙县: 341021,
        休宁县: 341022,
        黟县: 341023,
        祁门县: 341024,
        滁州市: 341100,
        琅琊区: 341102,
        南谯区: 341103,
        来安县: 341122,
        全椒县: 341124,
        定远县: 341125,
        凤阳县: 341126,
        天长市: 341181,
        明光市: 341182,
        阜阳市: 341200,
        颍州区: 341202,
        颍东区: 341203,
        颍泉区: 341204,
        临泉县: 341221,
        太和县: 341222,
        阜南县: 341225,
        颍上县: 341226,
        界首市: 341282,
        宿州市: 341300,
        埇桥区: 341302,
        砀山县: 341321,
        萧县: 341322,
        灵璧县: 341323,
        泗县: 341324,
        六安市: 341500,
        金安区: 341502,
        裕安区: 341503,
        叶集区: 341504,
        霍邱县: 341522,
        舒城县: 341523,
        金寨县: 341524,
        霍山县: 341525,
        亳州市: 341600,
        谯城区: 341602,
        涡阳县: 341621,
        蒙城县: 341622,
        利辛县: 341623,
        池州市: 341700,
        贵池区: 341702,
        东至县: 341721,
        石台县: 341722,
        青阳县: 341723,
        宣城市: 341800,
        宣州区: 341802,
        郎溪县: 341821,
        泾县: 341823,
        绩溪县: 341824,
        旌德县: 341825,
        宁国市: 341881,
        广德市: 341882,
      },
      dataMap: require("../../mapdata/anhui/anhui.json"),
      regionsdata: [],
      // new
      // 趋势分析echarts数据
      trendLicenseNum: [],
      // 群体类型
      chartData: [],
      groupTypeTot: 0,
      bgImg: [
        require("../../assets/xzxk-new/zjzl/title.png"),
        require("../../assets/xzxk-new/blqk/title.png"),
        require("../../assets/xzxk-new/xkrl/title.png"),
        require("../../assets/xzxk-new/zxpj/title.png"),
        require("../../assets/xzxk-new/zhgl/title.png"),
        require("../../assets/xzxk-new/dzyjy/title.png"),
        require("../../assets/xzxk-new/title.png"),
        require("../../assets/xzxk-new/db/title.png"),
      ],
      NewZjzl: {
        listOne: [
          {
            code: "holdLicenseNum",
            title: "持证零售户(户)",
            num: 0,
            title2: "网办率",
            per: 0,
            unit: "(户)",
          },
          {
            code: "netIncreaseAndIncreaseRadio",
            title: "零售户净增量(户)",
            num: 0,
            title2: "增幅",
            per: 0,
            unit: "(户)",
          },
        ],
        listTwo: [
          {
            code: "todayAddnum",
            title: "今日新增零售户",
            num: 0,
          },
          {
            code: "todayExitNum",
            title: "今日退出零售户",
            num: 0,
          },
          {
            code: "normalBusinessNum",
            title: "正常经营户",
            num: 0,
          },
        ],
      },
      NewBlqk: {
        listOne: [
          {
            code: "01",
            title: "新办",
            num: 0,
          },
          {
            title: "延续",
            num: 0,
          },
          {
            title: "变更",
            num: 0,
          },
          {
            title: "补办",
            num: 0,
          },
          {
            title: "停业",
            num: 0,
          },
          {
            title: "恢复营业",
            num: 0,
          },
          {
            title: "歇业",
            num: 0,
          },
        ],
        listTwo: [
          {
            title: "收回",
            num: 0,
          },
          {
            title: "注销",
            num: 0,
          },
          {
            title: "撤销",
            num: 0,
          },
          {
            title: "撤回",
            num: 0,
          },
          {
            title: "责令变更",
            num: 0,
          },
        ],
      },
      NewZHGL: {
        listOne: [
          {
            num: 0,
            title2: "直营店",
            per: 0,
          },
          {
            num: 0,
            title2: "加盟店",
            per: 0,
          },
        ],
        listTwo: [
          {
            num: 0,
            title2: "零售户(含雪茄烟零售)",
            per: 0,
          },
          {
            num: 0,
            title2: "专营店户数",
            per: 0,
          },
        ],
      },
      NewDzyjy: {
        saturationRadio: 0, // 饱和率
        normalBusinessNumRadio: 0, // 正常经营率
        list: [
          {
            code: "holdACertificateNum",
            title: "持证户",
            num: 0,
          },
          {
            code: "queueNum",
            title: "轮候队列在排",
            num: 0,
          },
          {
            code: "normalBusinessNum",
            title: "正常经营户",
            num: 0,
          },
        ],
      },
      rlxkBtn: ["容量", "趋势分析", "卷烟排队轮候"],
      zxpjBtn: ["好差评", "咨询投诉", "5+5"],
      zhglBtn: ["零售业态", "群体类型"],
      dbBtn: ["卷烟零售户增幅(%)", "卷烟商户率(‰)"],
      activeRlxkIndex: 0,
      activeRlxkIndex2: 0,
      activeZhglIndex: 0,
      activeDbIndex: 0,
      lsxkrl: {
        licCapacity: 0,
        rlList: [
          {
            title: "合理容量区间(户):",
            num: 0,
            unit: "(户)",
          },
          {
            title: "当前总数量(户):",
            num: 0,
            unit: "(户)",
          },
          {
            title: "商户率(‰):",
            num: 0,
            suffix: "‰",
            decimals: 2,
          },
          {
            title: "全国商户率(‰):",
            num: 0,
            suffix: "‰",
            decimals: 2,
          },
        ],
      },
      fiveAndFiveData: {
        dbl: 98.91,
        pjrwsj: 5.79,
      },
      fiveData: [],
      selectArea: "全省", // 5+5选择地区
      areaList: [
        { name: "全省" },
        { name: "合肥市" },
        { name: "安庆市" },
        { name: "蚌埠市" },
        { name: "阜阳市" },
        { name: "亳州市" },
        { name: "池州市" },
        { name: "滁州市" },
        { name: "淮北市" },
        { name: "淮南市" },
        { name: "黄山市" },
        { name: "六安市" },
        { name: "宿州市" },
        { name: "铜陵市" },
        { name: "芜湖市" },
        { name: "宣城市" },
        { name: "马鞍山市" },
      ],
      // old
      nowDate: null,
      nowTime: null,
      timer: "",
      currentTime: new Date(),
      defaultDate: [
        "2023-01-01",
        new Date().toLocaleDateString().replace(/\//g, "-"),
      ],
      currentIndex: 0,
      currentIndex2: 0,
      showone: true,
      city: true,
      startVal: 0,
      duration: 3000,
      btntext: ["好差评", "咨询投诉", "5+5"],
      // btntext2: ["容量", "趋势分析"],

      scjg: {
        lista: [
          {
            name: "烟草网格",
            num: "1055",
          },
          {
            name: "综治网格",
            num: "1785",
          },
          {
            name: "警务网格",
            num: "1516",
          },
        ],
        listb: [
          {
            name: "今日新增零售户",
            num: "92.35%",
            count: "81",
          },
          {
            name: "今日退出零售户",
            num: "92.35%",
            count: "59",
          },
          {
            name: "正常经营户",
            num: "98.33%",
            count: "284491",
          },
        ],
        listc: [
          {
            name: "人均管服数",
            num: "272",
            YOY: "1.87%",
          },
          {
            name: "人均检查户数",
            num: "33",
            YOY: "29.46%",
          },
          {
            name: "人均查获案件数",
            num: "2.3",
            YOY: "1.72%",
          },
          {
            name: "人均查获卷烟数",
            num: "4.78",
            YOY: "29.87%",
          },
        ],
        listd: [
          {
            name: "向未成年人售烟（含 电子烟）案件",
            num: "72",
            YoY: "10.77%",
          },
          {
            name: "罚没款收入",
            num: "3654.17",
            YoY: "4.98%",
          },
        ],
      },
      nbjk: {
        list: [
          {
            title: "真烟异流排名",
            // list:[
            //     {''},
            //     {}
            //     ]
          },
          {
            title: "真烟异流(万支)",
          },
          {
            title: "内管预警",
          },
        ],
      },
      qbyj: {
        list: [
          {
            num: "78687920111946",
            rank: "二级",
            add: "青岛-合肥",
            infor: "合肥中转部发件",
          },
          {
            num: "78687682456632",
            rank: "二级",
            add: "成都-马鞍山",
            infor: "马鞍山发件",
          },
          {
            num: "78342898189876",
            rank: "四级",
            add: "南京-黄山",
            infor: "黄山发件",
          },
        ],
      },
      djds: {
        list: [
          {
            name: "查获案件总数",
            num: "6890",
            YoY: "3.37%",
            unit: "起",
          },
          {
            name: "涉案总金额",
            num: "20531.4104",
            YoY: "90.88%",
            unit: "(万元)",
          },
          {
            name: "查获卷烟总量",
            num: "12796.0078",
            YoY: "29.88%",
            unit: "(万元)",
          },
          {
            name: "查获电子烟总量",
            num: "1019056",
            YoY: "19795.67%",
            unit: "个",
          },
          {
            name: "查获雪茄烟总量",
            num: "478.72",
            YoY: "367.04%",
            unit: "万支",
          },
          {
            name: "查获烟丝烟叶",
            num: "83302",
            YoY: "10.05%",
            unit: "公斤",
          },
          {
            name: "查获烟机总量",
            num: "6",
            YoY: "50%",
            unit: "台",
          },
          {
            name: "5万元以上案件",
            num: "803",
            YoY: "42.12%",
            unit: "起",
          },
          {
            name: "刑事案件",
            num: "110",
            YoY: "6.80%",
            unit: "起",
          },
          {
            name: "追刑人数",
            num: "66",
            YoY: "78.79%",
            unit: "人",
          },
        ],
      },
      xxyczp: {
        list: [
          {
            name: "涉案总金额",
            num: "106779.53",
            unit: "万元",
          },
          {
            name: "涉案物品",
            num: "1056157",
            unit: "个",
          },
          {
            name: "电子烟企业",
            num: "3",
            unit: "个",
          },
          {
            name: "追刑人数",
            num: "118",
            unit: "人",
          },
        ],
      },
      dataA: [],
      index: true,
      columnWidth: [50],
      align: ["center"],
      config: {
        data: [],
        header: ["今日时间", "单位", "类型", "申请渠道"],
        headerBGC: "", //#091046
        // rowNum: "4",
        oddRowBGC: "",
        evenRowBGC: "",
        waitTime: 3000,
        // align: ["center"],
        columnWidth: [118, 178, 60, 150],
      },
      pingpai: [
        {
          name: "直营店",
          num: "1413",
          YoY: "27.1%",
          src: imgtb1,
          unit: "(户)",
        },
        {
          name: "加盟店",
          num: "3819",
          YoY: "72.9%",
          src: imgtb2,
          unit: "(户)",
        },
      ],
      showWhat: "echartsbar",
      data: [],
      picktimeTemp: {},
      numData1: {},
      popData1: [],
      numData2: {},
      popData2: [],
      numData3: {},
      popData3: [],
      numData4: {},
      popData4: [],
      numData5: {},
      popData5: [],
      showLateAcceptPop: false,
      showLateAcceptPop2: false,
      showLateAcceptPop3: false,
      lateAcceptData: [
        {
          city_org_name: "", //市区
          county_org_name: "", //县局
          current_processor_name: "", //申请人
          zm_devide_days: "", //办理时长
          bcb_name: "", //超期环节
        },
      ],
      lateAcceptData2: [],
      NewXzxk: {
        homeListData: [], //零售户净增量
        title:"",
      },
      // 办理质效
      manageQE: [
        {
          title:"超期受理户次(户)",
          titles:["超期受理","户次(户)"] ,
          pop: true,
          num: 0,
          color: "safe-color", // >0 红
          decimals: 0,
          suffix: "",
        },
        {
          title: "超期办理户次(户)",
          titles: ["超期办理","户次(户)"],
          num: 0,
          pop: true,
          color: "safe-color", // >0 红
          decimals: 0,
          suffix: "",
        },
        {
          title: "许可咨询投诉数量(起)",
          titles: ["许可咨询","投诉数量(起)"],
          num: 0,
          color: "safe-color", // 上升红 下降绿
          decimals: 0,
          suffix: "",
        },
        {
          title: "咨询投诉超期处置数量(起)",
          titles: ["咨询投诉超期","处置数量(起)"],
          num: 0,
          color: "safe-color",
          decimals: 0,
          suffix: "",
        },
      ],
      jylhList: [
        {
          title: "饱和区域数",
          num: 0,
        },
        {
          title: "排队轮候数",
          num: 0,
        },
        {
          title: "排队轮候平均办证时长",
          num: 0,
        },
      ],
      // 零售业态
      retailerIntroImg: null,
      retailFormatData: {
        businessName: "零售业态",
        totalNum: 6000,
        totalName: "总户数",

        echartsData: [],
      },
      retailFormatEachrt: {
        pieX: "15%",
        pieY: "48%",
        pieWidth: "70%",
        pieHeight: "95%",
        textTop: "35%",
        textLeft: "13%",
        legend: {
          // bottom: "5%",
          left: "35%",
          height: "60%",
          top: "20%",
          orient: "vertical",
          textStyle: {
            color: "#fff",
            rich: {
              title: {
                color: "#34EFFE",
                fontWeight: 600,
              },
            },
          },
        },
      },
      // 卷烟轮候队列
      jylhListData: [
        // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 },
        // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 },
        // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 },
        // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 },
        // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 },
        // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 },
        // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 },
      ],
      showJylhPop: false,
      dbNum: [],
    };
  },
  components: {
    headtit,
    framemain,
    echartsbar,
    tousu,
    xuke,
    anhuiMap,
    retailFormat,
    timePicker,
    CustomList,
  },
  created() {
    // this.timer = setInterval(this.getTime, 1000);
    // this.initData(
    //   "prov_org_uuid",
    //   "00000000000000000000000011340001",
    //   "安徽省",
    //   "city_org_uuid",
    //   "city_org_name"
    // );
    localStorage.setItem("mapLevel",1);
    localStorage.setItem("columnName",'prov_org_uuid');
    localStorage.setItem("orgUuid",'00000000000000000000000011340001');
  },
  mounted() {
    // 曲线图
    // this.lineInit("qsfx-line"); //趋势分析
    // 好差评柱状图
    //this.barInit("hcp-box");
    // this.jindtutiao();
    // this.jindtutiaotwo();
    let _this = this;
    // window.addEventListener("setItemEvent", (event) => {
    //   if (event.key === "PICKTIME") {
    // console.log(event.newValue);
    //     _this.picktimeTemp = JSON.parse(event.newValue);
    //     if (_this.titleMap.level === 1) {
    //       _this.initData(
    //         "prov_org_uuid",
    //         "00000000000000000000000011340001",
    //         "安徽省",
    //         "city_org_uuid",
    //         "city_org_name"
    //       );
    //     } else if (_this.titleMap.level === 2) {
    //       _this.initData(
    //         "city_org_uuid",
    //         _this.titleMap.uuid,
    //         _this.titleMap.name,
    //         "county_org_uuid",
    //         "county_org_name"
    //       );
    //     } else {
    //       _this.initData(
    //         "county_org_uuid",
    //         _this.titleMap.uuid,
    //         _this.titleMap.name,
    //         "county_org_uuid",
    //         "county_org_name"
    //       );
    //     }
    //   }
    // });
  },
  metaInfo: {
    meta: [{ name: "referrer", content: "no-referrer" }],
  },
  computed: {
    scrollOption() {
      return {
        step: 0.2,
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        waitTime: 3000, // 单步运动停止的时间(默认值1000ms)
        limitMoveNum: 0,
      };
    },
  },
  watch: {
    "titleMap.uuid": {
      handler(newVal, oldVal) {
        localStorage.setItem("mapUuid", newVal);
      },
      immediate: true,
    },
    "columnName": {
      handler(newVal, oldVal) {
        localStorage.setItem("columnName", newVal);
      },
      immediate: true,
    },
  },
  methods: {
    timeChangeFn(timeObj) {
      this.picktimeTemp = timeObj;
      /**日期格式修改 */
      this.picktimeTemp.endDate = this.picktimeTemp.endDate.replace("月","").replace("日","");
      this.picktimeTemp.lastEndDate = this.picktimeTemp.lastEndDate.replace("月","").replace("日","");
      sessionStorage.setItem("certificateTimObj", JSON.stringify(timeObj));
      console.log(this.picktimeTemp, " this.picktimeTemp");
      if (this.titleMap.level === 1) {
        this.initData(
          "prov_org_uuid",
          "00000000000000000000000011340001",
          "安徽省",
          "city_org_uuid",
          "city_org_name",
          timeObj
        );
      } else if (this.titleMap.level === 2) {
        this.initData(
          "city_org_uuid",
          this.titleMap.uuid,
          this.titleMap.name,
          "county_org_uuid",
          "county_org_name",
          timeObj
        );
      } else {
        this.initData(
          "county_org_uuid",
          this.titleMap.uuid,
          this.titleMap.name,
          "county_org_uuid",
          "county_org_name",
          timeObj
        );
      }
    },
    showJylhPopFn(i) {
      if (i === 1) {
        this.showJylhPop = !this.showJylhPop;
      }
    },
    // hideJylhPopFn(i) {
    //   console.log(i,'-------------------');
    //   if (i === 1) {
    //     this.showJylhPop = false;
    //   }
    // },
    lateAcceptPop(flag, title) {
      if (flag) {
        if (title === "超期受理户次(户)") {
          this.showLateAcceptPop = !this.showLateAcceptPop;
          this.showLateAcceptPop2 = false;
        } else {
          this.showLateAcceptPop = false;
          this.showLateAcceptPop2 = !this.showLateAcceptPop2;
        }
      }
    },
    getRetailerIntro(i) {
      console.log(i, "==============");
      this.retailerIntroImg = i;
    },
    getRetailerIntroHide() {
      this.retailerIntroImg = null;
    },
    // 零售户净增量
    initRetailerIncreaseBar() {
      let myChart = this.$echarts.init(
        document.getElementById("retailer-increase-bar")
      );

      const Xdata = [];
      const homeListData = this.NewXzxk.homeListData;
      homeListData.sort((a, b) => a.increaseRadio - b.increaseRadio);
      let min = homeListData[0].increaseRadio;
      let max = homeListData[homeListData.length - 1].increaseRadio;
      const updata = [];
      const downdata = [];
      this.NewXzxk.homeListData.forEach((item) => {
        Xdata.push(item.org_name.split("").join("\n"));
        // data.push(item.increaseRadio);
        if (item.increaseRadio >= 0) {
          updata.push(item.increaseRadio);
          downdata.push(0);
        }
        if (item.increaseRadio < 0) {
          updata.push(0);
          downdata.push(item.increaseRadio);
        }
      });
      // let Ydata = {
      //   min: min,
      //   max: max,
      //   // interval: 5,
      // };
      let option = {
        color: ["rgba(191, 67, 93,.7)", "rgba(5, 187, 115,.7)"],

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            return (
              "<div>" +
              params[0].name +
              "<br>" +
              params[0].marker +
              params[0].seriesName +
              "(户):" +
              '<span style="color: #333;">' +
              params[0].value +
              "</span>" +
              "<br>" +
              params[1].marker +
              params[1].seriesName +
              "(户):" +
              '<span style="color: #333;">' +
              params[1].value +
              "</span>" +
              "</div>"
            );
          },
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "8%",
          top: "25%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: Xdata,
          axisTick: {
            alignWithLabel: true,
          },
          triggerEvent:true,
          axisLabel: {
            interval: 0, //X轴信息全部展示
            formatter: (value, index) => {
                return value;
            },

          },
          axisPointer: {
            type: "shadow",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.7)", //X轴字体颜色
              fontSize: "12",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "rgba(66, 164, 255, 0.3)", //里面横着的虚线
            },
          },
        },
        yAxis: {
          name: "单位：户",
          type: "value",
          // min: Ydata.min,
          // max: Ydata.max,
          nameTextStyle: {
            color: "rgba(255, 255, 255, 0.5)",
            fontSize: 12,
          },
          // interval: Ydata.interval,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "rgba(255,255,255,0.7)", //Y轴内容文字颜色
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(66, 164, 255, 0.3)", //y轴
              type: "solid",
              // fontSize: '12',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "rgba(66, 164, 255, 0.3)", //里面横着的虚线
            },
          },
        },
        series: [
          {
            name: "增加",
            type: "bar",
            stack: "总量",
            barWidth: "10",
            itemStyle: {
              // barBorderRadius: [10, 10, 0, 0],
            },
            // label: {
            //   normal: {
            //     show: true,
            //     position: "top",
            //   },
            // },
            data: updata,
          },
          {
            name: "下降",
            type: "bar",
            stack: "总量",
            barWidth: "10",
            itemStyle: {
              // barBorderRadius: [0, 0, 10, 10],
            },
            // label: {
            //   normal: {
            //     show: true,
            //     position: "bottom",
            //   },
            // },
            data: downdata,
          },
        ],
      };
      myChart.showLoading();
      this.$nextTick(() => {
        myChart.setOption(option, true);
        myChart.resize();
        myChart.hideLoading();
      });
    },
    // 零售户增幅
    initDbOneBar() {
      let myChart = this.$echarts.init(document.getElementById("db-one-bar"));

      const Xdata = [];
      // let min = this.NewXzxk.homeListData.sort((a, b) => a.value - b.value)[0]
      //   .value;
      // let max = this.NewXzxk.homeListData.sort((a, b) => a.value - b.value)[
      //   this.NewXzxk.homeListData.length - 1
      // ].value;
      const updata = [];
      const downdata = [];
      this.dbNum.forEach((item) => {
        Xdata.push(item.org_name.split("").join("\n"));
        if(item.org_name=='安徽'){
          if(this.NewZjzl.listOne[1].per >= 0) {
            updata.push(this.NewZjzl.listOne[1].per);
            downdata.push(0);
          }
          if(this.NewZjzl.listOne[1].per < 0) {
            updata.push(0);
            downdata.push(this.NewZjzl.listOne[1].per);
          }
        }else{
          if(item.increase_radio >= 0) {
            updata.push(item.increase_radio);
            downdata.push(0);
          }
          if(item.increase_radio < 0) {
            updata.push(0);
            downdata.push(item.increase_radio);
          }
        }
        // if (item.increase_radio >= 0) {
        //   updata.push(item.increase_radio);
        //   downdata.push(0);
        // }
        // if (item.increase_radio < 0) {
        //   updata.push(0);
        //   downdata.push(item.increase_radio);
        // }
      });
      // let Ydata = {
      //   min: min,
      //   max: max,
      //   // interval: 5,
      // };
      let option = {
        color: ["rgba(191, 67, 93,.7)", "rgba(5, 187, 115,.7)"],

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            return (
              "<div>" +
              params[0].name +
              "<br>" +
              params[0].marker +
              params[0].seriesName +
              // "(户):" +
              '<span style="color: #333;">' +
              params[0].value +
              "%" +
              "</span>" +
              "<br>" +
              params[1].marker +
              params[1].seriesName +
              // "(户):" +
              '<span style="color: #333;">' +
              params[1].value +
              "%" +
              "</span>" +
              "</div>"
            );
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "10%",
          top: "25%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: Xdata,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            interval: 0, //X轴信息全部展示
            formatter: (value, index) => {
                return value;
            },

          },
          axisPointer: {
            type: "shadow",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.7)", //X轴字体颜色
              fontSize: "12",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "rgba(66, 164, 255, 0.3)", //里面横着的虚线
            },
          },
        },
        yAxis: {
          name: "单位：%",
          type: "value",
          // min: Ydata.min,
          // max: Ydata.max,
          nameTextStyle: {
            color: "rgba(255, 255, 255, 0.5)",
            fontSize: 12,
          },
          // interval: Ydata.interval,
          interval: 2,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "rgba(255,255,255,0.7)", //Y轴内容文字颜色
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(66, 164, 255, 0.3)", //y轴
              type: "solid",
              // fontSize: '12',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "rgba(66, 164, 255, 0.3)", //里面横着的虚线
            },
          },
        },
        series: [
          {
            name: "增加",
            type: "bar",
            stack: "总量",
            // barWidth: "10",
            itemStyle: {
              // barBorderRadius: [10, 10, 0, 0],
            },
            label: {
              normal: {
                show: Xdata.length<10,
                position: "top",
                textStyle: {
                    color: "#fff",
                  },
                formatter(item){
                  return item.data ? item.data:''
                
                }
              },
            },
            data: updata,
          },
          {
            name: "下降",
            type: "bar",
            stack: "总量",
            // barWidth: "10",
            itemStyle: {
              // barBorderRadius: [0, 0, 10, 10],
            },
            label: {
              normal: {
                show: Xdata.length<10,
                position: "bottom",
                textStyle: {
                    color: "#fff",
                  },
                formatter(item){
                  return item.data ? item.data:''
                
                }
              },
            },
            data: downdata,
          },
        ],
      };
      myChart.showLoading();
      this.$nextTick(() => {
        myChart.setOption(option, true);
        myChart.resize();
        myChart.hideLoading();
      });
    },
    // 地图返回
    mapBack(index) {
      let that = this;
      that.titleMap.level = index + 1;
      if (that.titleMap.level == 1) {
        that.clickArea = [];

        that.titleMap.name = "安徽省";
        that.titleMap.uuid = "00000000000000000000000011340001";
        that.clickArea.push(that.titleMap.name);
        console.log(that.titleMap, "地图返回,");
        that.initData(
          "prov_org_uuid",
          that.titleMap.uuid,
          that.titleMap.name,
          "city_org_uuid",
          "city_org_name"
        );
      } else if (that.titleMap.level == 2) {
        console.log(that.titleMap, "返回地市");
        if (that.titleMap.level < that.clickArea.length) that.clickArea.pop();
        that.initData(
          "city_org_uuid",
          that.titleMap.cityUuid,
          that.titleMap.oldName,
          "county_org_uuid",
          "county_org_name"
        );
      }
    },
    //初始化数据
    initData(
      columnName,
      orgUuid,
      name,
      juniorColumnNameUuid,
      juniorColumnName
    ) {
      console.log('当前区域信息',this.titleMap);
      let that = this;
      that.columnName = columnName;
      that.titleMap.uuid = orgUuid;
      that.activeRlxkIndex=0
      that.activeRlxkIndex2=0
      that.activeDbIndex=0
      that.activeZhglIndex=0
      let limit = 10;
      console.log(that.picktimeTemp, "============================");
      getLicenseFiveFive;
      const req1 = getLicOverview({
        columnName,
        orgUuid,
        ...that.picktimeTemp,
      });
      const req2 = getLicHanding({
        ...that.picktimeTemp,
        limit: limit,
        columnName,
        orgUuid,
      });
      const req3 = getLicTotalManagement({
        ...that.picktimeTemp,
        columnName,
        orgUuid,
      });
    

      let req6 = null
      if(that.titleMap.level==1){
        req6 = getLicMapData({
        ...that.picktimeTemp,
        columnName,
        orgUuid,
        juniorColumnNameUuid,
        juniorColumnName,
      });
      }else{
      req6 = getLicCountyMapData({
        ...that.picktimeTemp,
        columnName,
        orgUuid,
        juniorColumnNameUuid,
        juniorColumnName,
      });
      }
      
      let year = new Date().getFullYear();

      let req4 = null

      let req5 = null
      let req7 = null
      let req8 = null
      let req9 = null 
      if(that.titleMap.level==1){
        req4 = getLicECigar({
        ...that.picktimeTemp,
        columnName1:'parent_org_uuid',
        columnName,
        orgUuid,
      });
      }else{
        req4 = getLicECigar({
        ...that.picktimeTemp,
        columnName1:'org_uuid',
        columnName,
        orgUuid,
      });
      }

      if(that.titleMap.level <=2){
        req5 =  getLicCapacity({
        ...that.picktimeTemp,
        columnName,
        orgUuid,
      });
      req7 = getLicenseFiveFive({
        ...that.picktimeTemp,
        columnName,
        orgUuid,
      });
      req8 =  getCapacity({
          ...that.picktimeTemp,
        columnName,
        orgUuid,
        year: year,
      });
        req9 = getHomeHoldLicenseNum({
        ...that.picktimeTemp,
        columnName,
        orgUuid,
      });

      }else{
     
        req5 =  getLicCapacity({
        ...that.picktimeTemp,
        columnName:'city_org_uuid',
        orgUuid:this.titleMap.cityUuid,
      });
      req7 = getLicenseFiveFive({
        ...that.picktimeTemp,
        columnName:'city_org_uuid',
        orgUuid:this.titleMap.cityUuid,
      });
        req8 =  getCapacity({
        ...that.picktimeTemp,
        columnName:'city_org_uuid',
        orgUuid:this.titleMap.cityUuid,
        year: year,
      });
       req9 = getHomeHoldLicenseNum({
        ...that.picktimeTemp,
        columnName:'city_org_uuid',
        orgUuid:this.titleMap.cityUuid,
      });
      }
     

      const req10 = getHomeFiveFive({
        ...that.picktimeTemp,
        columnName,
        orgUuid,
      });
      let req11=null
      if(that.titleMap.level == 1){
         req11 = getHomeLicPlace({
          ...that.picktimeTemp,
          columnName1: "prov_org_uuid",
          columnName2: "city_org_uuid ",
          columnName3: "city_org_name",
          orgUuid,
        });
      }else if(that.titleMap.level == 2){
         req11 = getHomeListJuniorData({
          ...that.picktimeTemp,
          columnName1: "parent_org_uuid",
          columnName2: "org_uuid",
          columnName3: "org_name",
          orgUuid,
        });
      }
      // else if(that.titleMap.level == 3){
      //    req11 = getHomeListJuniorData({
      //     ...that.picktimeTemp,
      //     columnName1: "parent_org_uuid",
      //     columnName2: "org_uuid",
      //     columnName3: "org_name",
      //     orgUuid,
      //   });
      // }
      
      // const req12 = getHomeTimeOut({
      //   ...that.picktimeTemp,
      //   columnName,
      //   orgUuid,
      // });
      const req13 = getRetailTotal({
        ...that.picktimeTemp,
        columnName,
        orgUuid,
      });

      Promise.all([
        req1,
        req2,
        req3,
        req4,
        req5,
        req6,
        req7,
        req8,
        req9,
        req10,
        req11,
        // req12,
        req13,
      ])
        .then(function (results) {
          // 零售业态
          const data13 = results[11];
          console.log(data13, "零售业态");
          that.retailFormatData.totalNum = !data13.totalNum.data.length ? 0 : data13.totalNum.data[0]?.num;
          that.retailFormatData.echartsData = data13.formatNum.data;
          that.retailFormatData.echartsData.forEach((k) => {
            k.name = k.bizName;
            k.value = k.bizNums;
          });
          that.retailFormatEachrt.legend.formatter = function (name) {
            return (
              name +
              `{title| ${
                that.retailFormatData.echartsData.find((k) => k.name === name)
                  ?.value
              }   }`
            );
          };
          that.$refs["retailFormat"].echartsInit();
          // 证件总览
          const data1 = results[0];
          console.log(data1, "证件总览");
          // that.NewZjzl.listOne.forEach((k) => {
          //   k.num = data1[k.code].data[0]?.num;
          // });
          that.NewZjzl.listTwo.forEach((k) => {
            k.num = data1[k.code].data[0]?.num;
          });
          // that.NewZjzl.listOne[0].per = data1.onlineRadio.data[0]?.num;
          // that.NewZjzl.listOne[1].per =
          //   data1.netIncreaseAndIncreaseRadio.data[0]?.yearOnYear;
          that.NewZjzl.listOne = [
            {
              code: "holdLicenseNum",
              title: "持证零售户(户)",
              num: data1.holdLicenseNum.data[0]?.num,
              title2: "网办率",
              per: !data1.onlineRadio.data[0]?.num
                ? "-"
                : data1.onlineRadio.data[0]?.num,
              unit: "(户)",
            },
            {
              code: "netIncreaseAndIncreaseRadio",
              title: "零售户净增量(户)",
              num: data1.netIncreaseAndIncreaseRadio.data[0]?.increaseNum,
              title2: "增幅",
              per: !data1.netIncreaseAndIncreaseRadio.data[0]?.increaseRadio
                ? "-"
                : data1.netIncreaseAndIncreaseRadio.data[0]?.increaseRadio,
              unit: "(户)",
            },
          ];
          // 办理情况
          const data2 = results[1];
          console.log(data2, "办理情况");
          // 依申请
          that.NewBlqk.listOne.forEach((k) => {
            k.num = data2.applyData.data.find(
              (k2) => k.title === k2.bcb_name
            ).num;
          });
          // 依职权
          that.NewBlqk.listTwo.forEach((k) => {
            k.num = data2.authorityData.data.find(
              (k2) => k.title === k2.bcb_name
            ).num;
          });
          // that.config.data = [];
          // data2.applyRecently.data.forEach((k, i) => {
          //   that.config.data.push([
          //     k.decide_date,
          //     k.org_short_name,
          //     k.apply_type_name,
          //     k.channel_sys_name,
          //   ]);
          // });
          // that.config = { ...that.config };
          that.config.data = data2.applyRecently.data;

          // 综合管理
          const data3 = results[2];
          console.log(data3, "综合管理");
          that.NewZHGL = {
            listOne: [
              {
                // num: data3.brandShopData.data[0]?.directlyOperatedStoreNum,
                num: 2754,
                title2: "直营店(户)",
                per: 74.07,
                // per: !data3.brandShopData.data[0]?.directlyOperatedStoreNumRadio
                //   ? "-"
                //   : data3.brandShopData.data[0]?.directlyOperatedStoreNumRadio,
              },
              {
                // num: data3.brandShopData.data[0]?.franchiseStoreNum,
                num: 964,
                title2: "加盟店(户)",
                per: 25.93,
                // per: !data3.brandShopData.data[0]?.franchiseStoreNumRadio
                //   ? "-"
                //   : data3.brandShopData.data[0]?.franchiseStoreNumRadio,
              },
            ],
            listTwo: [
              {
                // todo
                // num: data3.cigar.data[0]?.involveNum,
                num:data1.normalBusinessCigarNum.data[0]?.involveNum,
                title2: "零售户(含雪茄烟零售)(户)",
                // per: data3.cigar.data[0]?.involveNumRadio,
                per: data1.normalBusinessCigarNum.data[0]?.involveNumRadio,
              },
              {
                // num: data3.cigar.data[0]?.specialismNum,
                num:data1.normalBusinessCigarNum.data[0]?.specialismNum,
                title2: "专营店户数(户)",
                // per: data3.cigar.data[0]?.specialismNumRadio,
                per: data1.normalBusinessCigarNum.data[0]?.specialismNumRadio,
              },
            ],
          };
          // 群体类型
          that.chartData=[]
          that.chartData = data3.specialType.data;
          console.log('群体类型',that.chartData);
          // that.chartData[data3.specialType.data.length - 1].num +=data3.specialType.data[0].num;
          that.chartData.sort((star, next) => {
            return star.num - next.num;
            // return next.num - star.num;
          });
          // that.chartData.push(
          //   ...that.chartData.splice(
          //     that.chartData.findIndex((k) => k.specialName === "其他"),
          //     1
          //   )
          // );
          // that.$nextTick(()=>{
          //   that.initpie();
          // })
          // 电子烟
          const data4 = results[3];
          console.log(data4, "电子烟");
          // that.NewDzyjy.list.forEach((k) => {
          //   k.num = data4.electronicCigarettesManagement.data[0][k.code];
          //   if (k.code === "queueNum") k.num = 0;
          // });
          that.NewDzyjy.list.forEach((k,index) => {
            if(k.code=='holdACertificateNum'){
              k.num=data1.normalBusinessCigarNum.data[0].ecigarNum
            }else if(k.code=='normalBusinessNum'){
              k.num=data1.normalBusinessCigarNum.data[0].normalBusinessNum
            }else{
              k.num=0
            }
          });
          that.NewDzyjy.saturationRadio =
            data4.electronicCigarettesManagement.data[0]?.saturationRadio;
          // that.NewDzyjy.saturationRadio = 27.33;
          that.NewDzyjy.normalBusinessNumRadio =
             data1.normalBusinessCigarNum.data[0].normalBusinessNumRadio.toFixed(2)
            // data4.electronicCigarettesManagement.data[0]?.normalBusinessNumRadio;
          that.pieInit("pie2");
          that.pieInit("pie3");
          // 容量
          const data5 = results[4];
          const data8 = results[7];
          that.trendLicenseNum = data8.reasonableCapacityYear.data;
          console.log(data8,'趋势分析');
          const data9 = results[8];

          console.log(data5, "容量");
          // 零售户净增量增幅

          // that.lsxkrl.licCapacity = data5.capacityData.data[0]?.capacityRadio;
          that.lsxkrl.licCapacity = data9.homeLicCapacity.data[0]
            ? data9.homeLicCapacity.data[0]?.homeLicCapacity
            : "-";
          that.lsxkrl.rlList = [
            {
              title: "合理容量区间(户):",
              num: data8.reasonableCapacityCfg.data.length
                ? "[" +
                  data8.reasonableCapacityCfg.data[0]?.limits.split(",")[0] +
                  "-" +
                  data8.reasonableCapacityCfg.data[0]?.limits.split(",")[1] +
                  "]"
                : "-",
              unit: "(户)",
            },
            {
              title: "当前总数量(户):",
              num: data5.capacityData.data[0]?.licNum,
              unit: "(户)",
            },
            {
              title: "商户率(‰):",
              // todo
              // num: data5.capacityData.data[0]?.holdCertificateRadio,
              num: data9.homeLicAHCustRate.data[0]
                ? data9.homeLicAHCustRate.data[0]?.custRate
                : "-",
              suffix: data9.homeLicAHCustRate.data[0] ? "‰" : "",
              decimals: 2,
            },
            {
              title: "全国商户率(‰):",
              // todo
              // num: data5.holdCertificateRadioNationwide.data[0]
              //   .holdCertificateRadioNationwide,
              num: data9.homeLicCustRate.data[0]?.country_owner_rate,
              suffix: "‰",
              decimals: 2,
            },
          ];

          // 容量饼图
          that.$nextTick(() => {
            that.pieInit("rl-pie");
          });

          // that.trendLicenseNum = data5.trendLicenseNum.data;
          // 地图数据
          const data6 = results[5];
          // const mapd={
          //   "阜阳市":["颍州区","颍东区","颍泉区"],
          // }

          // console.log(data6, "地图数据");
          // that.data=[];
          // data6.forMap.data.map((item) => {
          //   that.data.push(
          //     Object.assign({}, item, {
          //       name: that.titleMap.level!=1? item.org_name.replace("烟草专卖局","").replace("合肥市","").replace("黄山市","").replace("芜湖市","").replace("安徽省",""):item.org_name.replace("烟草专卖局",""),
          //       value: item.holdLinenseNum,
          //       value1: item.ecigarNum,
          //       value2: item.normalBusinessNum,
          //     })
          //   );
          // });
          const mapd = {
            阜阳市: ["颍州区", "颍东区", "颍泉区"],
            宿州市: ["埇桥区"],
            淮北市: ["烈山区", "相山区", "杜集区"],
            蚌埠市: ["淮上区", "龙子湖区", "蚌山区", "禹会区"],
            淮南市: ["谢家集", "八公山", "田家庵", "大通"],
            滁州市: ["南谯区", "琅琊区"],
            六安市: ["裕安区", "金安区"],
            马鞍山市: ["花山区", "雨山区", "博望区"],
            芜湖市: ["鸠江区", "弋江区", "镜湖区"],
            铜陵市: ["郊区", "铜官区"],
            安庆市: ["大观区", "宜秀区", "迎江区"],
          };
          var mapa = [];
          console.log(data6.forMap.data, "地图数据");
          that.data = [];
          data6.forMap.data.map((item) => {
            if (
              item.org_name == "阜阳市烟草专卖局直属分局" ||
              item.org_name == "马鞍山市烟草专卖局钢城分局" ||
              item.org_name == "六安市烟草专卖局皋城分局" ||
              item.org_name == "滁州市烟草专卖局直属分局" ||
              item.org_name == "蚌埠市烟草专卖局直属分局" ||
              item.org_name == "淮北市烟草专卖局直属分局" ||
              item.org_name == "宿州市烟草专卖局直属分局" ||
              item.org_name == "淮南市烟草专卖局谢家集八公山分局" ||
              item.org_name == "芜湖市烟草专卖局直属分局" ||
              item.org_name == "芜湖市烟草专卖局江北分局" ||
              item.org_name == "铜官区烟草专卖局" ||
              item.org_name == "宜城烟草专卖局" ||
              item.org_name == "淮南市烟草专卖局田家庵大通分局"
            ) {
              mapa.push(item);
            } else{
              that.data.push(
                Object.assign({}, item, {
                  name:
                    that.titleMap.level != 1
                      ? item.org_name
                      ?.replace("烟草专卖局", "")
                          .replace("合肥市", "")
                          .replace("淮南市", "")
                          .replace("亳州市", "")
                          .replace("黄山市", "")
                          .replace("芜湖市", "")
                          .replace("安徽省", "")
                          .replace("分局", "区")
                      : item.org_name?.replace("烟草专卖局", ""),
                  value: item.holdLinenseNum,
                  value1: item.ecigarNum,
                  value2: item.normalBusinessNum,
                })
              );
            }
          });
          console.log(mapa, "地图数据pro");

          if (
            that.titleMap.level != 1 &&
            (mapd[that.titleMap.oldName] != null ||
              typeof mapd[that.titleMap.oldName] != "undefined")
          ) {
            mapd[that.titleMap.oldName].forEach((item) => {
              if (that.titleMap.oldName == "淮南市") {
                let k = mapa.find((k2) => k2.org_name.includes(item));
                console.log(k, "地图数据pasdaro");
                that.data.push(
                  Object.assign({}, k, {
                    name: item + "区",
                    value: k?.holdLinenseNum,
                    value1: k?.ecigarNum,
                    value2: k?.normalBusinessNum,
                  })
                );
              } else if (that.titleMap.oldName == "芜湖市") {
                let k = {};
                if (item == "鸠江区")
                  k = mapa.find((k2) => k2.org_name.includes("江北分局"));
                else k = mapa.find((k2) => k2.org_name.includes("直属分局"));
                console.log(k, "地图数据pasdaro");
                that.data.push(
                  Object.assign({}, k, {
                    name: item,
                    value: k?.holdLinenseNum,
                    value1: k?.ecigarNum,
                    value2: k?.normalBusinessNum,
                  })
                );
              } else {
                that.data.push(
                  Object.assign({}, mapa[0], {
                    name: item,
                    value: mapa[0]?.holdLinenseNum,
                    value1: mapa[0]?.ecigarNum,
                    value2: mapa[0]?.normalBusinessNum,
                  })
                );
              }
            });
          }

          console.log(
            that.data.sort((a, b) => a.value - b.value),
            "地图数据2"
          );
          let addres = that.dataMaps[name];
          if (that.titleMap.level == 1 || that.titleMap.level == 2) {
            addres += "_full.json";
          } else {
            addres += ".json";
          }
          axios
            .get("https://geo.datav.aliyun.com/areas_v3/bound/" + addres)
            .then(function (res) {
              that.dataMap = res.data;

              that.mapCrackDown("centerMap");
              // that.clickArea.push()
            })
            .catch(function (error) {
              console.log(error);
            });
          // 质效评价
          const data7 = results[6];
          console.log(data7, "质效评价");

          // 好差评柱状图
          that.goodBadData = [];
          that.goodBadData.push(data7.goodBadData.data[0]?.veryGoodNumber);
          that.goodBadData.push(data7.goodBadData.data[0]?.goodNumber);
          that.goodBadData.push(data7.goodBadData.data[0]?.badNumber);
          that.$nextTick(() => {
            that.barInit("hcp-box");
          });

          //投书举报
          that.complainData.month = [];
          that.complainData.totalityNumber = [];
          that.complainData.verifyNumber = [];
          that.complainData.overTimeNumber = [];
          that.complainData.czlNumber = [];
          data7.complainData.data.forEach((item) => {
            that.complainData.month.push(item?.month + "月");
            that.complainData.totalityNumber.push(item?.totalityNumber);
            that.complainData.verifyNumber.push(item?.verifyNumber);
            that.complainData.overTimeNumber.push(item?.overTimeNumber);
            // that.complainData.czlNumber.push(item?.czlNumber * 100);
          });

          that.complainData.czlNumber = data7.complainData.data.map((k, i) =>
            (
              ((k.totalityNumber - k.overTimeNumber) / k.totalityNumber) *
              100
            ).toFixed(2)
          );
          let comlength = that.complainData.month.length;
          /* setTimeout(()=>{
            that.complainData.month.splice(comlength - 5, comlength)
            that.complainData.totalityNumber.splice(comlength - 5, comlength)
            that.complainData.verifyNumber.splice(comlength - 5, comlength)
            that.complainData.overTimeNumber.splice(comlength - 5, comlength)
            that.complainData.czlNumber.splice(comlength - 5, comlength)
          },100) */
          console.log(data7,that.complainData, "投书举报");
          const data10 = results[9];
          that.fiveAndFiveData.dbl = data10.homeFiveData.data[0]?.dbNumber;
          that.fiveAndFiveData.pjrwsj = data7.fiveData.data[0]?.avgNumber;
          that.fiveAndFiveData.qsbl = that.fiveAndFiveData.pjrwsj + 0.2;

          that.fiveData = [];
          that.fiveData.push(data7.fiveData.data[0]?.xkNumber);
          that.fiveData.push(data7.fiveData.data[0]?.rwNumber);

          // 零售户净增
          const data11 = results[10];
          console.log(data11, "地市局零售户净增量");
          // that.NewXzxk.homeListData=[]
          if(that.titleMap.level == 1){
            that.NewXzxk.homeListData = data11.homeListData.data;
            that.NewXzxk.title = "地市局零售户净增量";

          }else if(that.titleMap.level == 2){
            that.NewXzxk.homeListData = data11.homeListJuniorData.data;
            that.NewXzxk.title = "区县局零售户净增量";
          }
          that.initRetailerIncreaseBar();

          // 弹窗
          that.numData1 = {
            num: that.NewZjzl.listOne[0].num,
            decimals: 0,
            suffix: "",
          };
          that.popData1 = [
            {
              label: "网办率",
              value: that.NewZjzl.listOne[0].per,
              unit: "%",
              color: "main-color",
            },
          ];
          that.numData2 = {
            num: that.NewZjzl.listOne[1].num,
            decimals: 0,
            suffix: "",
          };
          that.popData2 = [
            {
              label: "增幅",
              value: that.NewZjzl.listOne[1].per,
              imgSrc:
                that.NewZjzl.listOne[1].per > 0
                  ? require("../../assets/common-new/red-top.png")
                  : require("../../assets/common-new/green-down.png"),
              unit: "%",
              color:
                that.NewZjzl.listOne[1].per > 0 ? "danger-color" : "safe-color",
            },
          ];
          that.numData3 = {
            // num: that.fiveAndFiveData.pjrwsj,
            num:that.fiveData.reduce(function (total, value) {
            return total + value;
            }, 0),
            decimals: 2,
            suffix: "",
          };
         
          that.popData3 = [
            {
              label: "",
              // value: that.fiveAndFiveData.qsbl,
              value: 0,
              unit: "",
              color: "main-color",
            },
          ];
          if(that.titleMap.level === 1){
            that.popData3[0].label='全省行政机关业务办理平均时长(天):'
            let Averduration = that.fiveData.reduce(function (total, value) {
            return total + value;
            }, 0)
            that.popData3[0].value=(Averduration+0.2).toFixed(2)
            sessionStorage.setItem("qsxzjgAver", JSON.stringify({Averduration}));
          }else{
            that.popData3[0].label='全省平均入网可订货时长(天):'
            that.popData3[0].value=JSON.parse(sessionStorage.getItem('qsxzjgAver')).Averduration
          }
          that.numData4 = {
            num: that.NewZHGL.listTwo[0].num,
            decimals: 0,
            suffix: "",
          };
          that.popData4 = [
            {
              label: "占比",
              value: that.NewZHGL.listTwo[0].per.toFixed(2),
              unit: "%",
              color: "main-color",
            },
          ];
          that.numData5 = {
            num: that.NewZHGL.listTwo[1].num,
            decimals: 0,
            suffix: "",
          };
          that.popData5 = [
            {
              label: "占比",
              value: that.NewZHGL.listTwo[1].per.toFixed(2),
              unit: "%",
              color: "main-color",
            },
          ];
        })
        .then(() => {
          if(that.titleMap.level==1){
              getBmkData({
              ...that.picktimeTemp,
              columnName,
              orgUuid,
              year: getPrevMonth()[0],
              month: getPrevMonth()[1] , //取上个月 todo
            }).then((res) => {
              that.dbNum = res.licenseBmkData.data;
              console.log('that.dbNum',that.dbNum );
              that.initDbOneBar();
            });
          }else if(that.titleMap.level==2){
            sessionStorage.setItem("shi_city_org_uuid", JSON.stringify(orgUuid));
             getHomeAmplifyCityData({
              ...that.picktimeTemp,
              columnName1: "prov_org_uuid",
              columnName2: "city_org_uuid",
              columnName3: "city_org_name",
              columnName:"prov_org_uuid",
            }).then((res) => {
              that.dbNum=[]
              console.log('市级',res);
              res.homeLicAHCityCustRate.data.forEach((item)=>{
              
               let data1 = res.homeAmplifyCityData.data.find(it=>it.org_name === item.org_name)
               console.log(data1);
                that.dbNum.push({
                  org_name:item.org_name,
                  license_radio:item.custRate,
                  increase_radio:data1.increaseRadio=='-'?0:data1.increaseRadio,
                })
              })
              console.log(that.dbNum);
              that.initDbOneBar();
            });
            
          }else if(that.titleMap.level==3){
            getHomeAmplifyCountyData({
              ...that.picktimeTemp,
              columnName1: "city_org_uuid",
              columnName2: "county_org_uuid",
              columnName3: "county_org_name",
              columnName:'city_org_uuid',
              orgUuid:that.titleMap.cityUuid,
            }).then((res) => {
              that.dbNum=[]
              console.log('县级',res);
              res.homeLicAHCountyCustRate.data.forEach((item)=>{
              
              let data1 = res.homeAmplifyCountyData.data.find(it=>it.org_name === item.org_name)
              console.log(data1);
              if(data1){
                that.dbNum.push({
                 org_name:item.org_name,
                 license_radio:item.custRate=='-'?0:item.custRate,
                 increase_radio:data1.increaseRadio=='-'?0:data1.increaseRadio,
               })
              }else{
                that.dbNum.push({
                 org_name:item.org_name,
                 license_radio:item.custRate=='-'?0:item.custRate,
                 increase_radio:0,
               })
              }
              
             })
             console.log(that.dbNum);
              that.initDbOneBar();
            });
            
          }
          
          getFiveAndFiveList({
            ...that.picktimeTemp,
            columnName,
            orgUuid,
          }).then((data14) => {
            that.listTitle = '"5+5"达标率排名'
            // data14.workRadio.name;
            that.listColumns = data14.colDef.data
              .sort((sta, next) => {
                return sta.colOrder - next.colOrder;
              })
              .map((k) => k.colName);
            that.listItems = data14.workRadio.data.map((k) => {
              return {
                col1: k.ranking,
                col2: k.orgName,
                col3: {per:k.workRadio},
              };
            });
          });

          // 超期...
          getHomeTimeOut({
            ...that.picktimeTemp,
            columnName,
            orgUuid,
          }).then((data12) => {
            // const data12 = results[11];
            that.lateAcceptData = data12.homeNewDoListData.data;
            that.lateAcceptData.forEach((k) => (k.bcb_name = "受理"));
            that.lateAcceptData2 = data12.homeOtherListData.data;
            that.lateAcceptData2.forEach((k) => (k.bcb_name = "办理"));
            console.log(data12, "超期 许可 投诉 办理");
            that.manageQE[0].num = data12.homeNewDoData.data[0]?.num;
            that.manageQE[0].color =
              data12.homeNewDoData.data[0]?.num <= 0
                ? "safe-color"
                : "danger-color";
            that.manageQE[1].num = data12.homeOtherData.data[0]?.num;
            that.manageQE[1].color =
              data12.homeOtherData.data[0]?.num <= 0
                ? "safe-color"
                : "danger-color";
            //that.manageQE[2].num = 11522;
            that.manageQE[2].num =
            data12.homeComplainData.data[0]?.consult_complain_number;
            // 环比上升红 反之绿
            that.manageQE[2].color =
              data12.homeComplainData.data[0]?.hb && data12.homeComplainData.data[0]?.hb >= 0
                ? "danger-color"
                : "safe-color";
            //that.manageQE[2].color = "main-color";
            that.manageQE[3].num = data12.homeTimeOutData.data[0]?.time_out_number;
            //that.manageQE[3].num = 54;
            that.manageQE[3].color = data12.homeTimeOutData.data[0]?.time_out_number >0 ?"danger-color":"safe-color";
          });
        })
        .catch(function (error) {
          console.log(error, "error");
        });
    },
    //双击下钻地图
    changeMap(dbArea, name) {
      console.log(dbArea, "双击地图下钻");

      let that = this;
      that.titleMap.name = name;
      that.titleMap.level++;
      if (that.titleMap.level > 3) that.titleMap.level = 3;
      //  this.timer = setInterval(this.getTime, 1000);
      if (that.titleMap.level == 2) {
        that.titleMap.oldName = name;
        that.titleMap.uuid = dbArea.org_uuid;
      }
      console.log(that.titleMap, "下钻地区");
      if (that.clickArea.length < 3) that.clickArea.push(that.titleMap.name);
      if (that.titleMap.level == 2) {
        that.titleMap.cityUuid = dbArea.org_uuid;
        that.initData(
          "city_org_uuid",
          dbArea.org_uuid,
          name,
          "county_org_uuid",
          "county_org_name"
        );
      } else {
        that.titleMap.countyUuid = dbArea.org_uuid;
        that.initData(
          "county_org_uuid",
          dbArea.org_uuid,
          name,
          "county_org_uuid",
          "county_org_name"
        );
      }
    },
    //下钻地图
    mapCrackDown(id) {
      let that = this;
      let imgUrl = require("../../assets/qjzl/dialogbg.png");
      // let min=that.data.sort((a, b) => a.value - b.value)[0].value;
      // let max = that.data.sort((a, b) => a.value - b.value)[that.data.length-1].value;
      // console.log(min,"min");
      // console.log(max,"max");
      let options = {
        tooltip: {
          show: true,
          backgroundColor: "rgba(0,0,0,0)",
          borderWidth: "0",
          formatter: function (params) {
            var res = `<div style="min-width:280px;background:url(${imgUrl}) no-repeat;background-size:100% 100%;padding:20px 30px;">
                  <div style="width:100%;margin:0 auto;padding:0 auto;text-align:center;font-size:16px;font-weight:bold;color:#fff;">
                   ${
                     typeof params.data == "undefined"
                       ? params.name
                       : params.data.org_name
                   }
                  </div>
                    ${that.formatterCustom(params.data)}
                </div>`;

            return res;
          },
        },
        //地图背景颜色
        // visualMap: {
        //   left: 'right',
        //   min: min,
        //   max: max,
        //   show: false,
        //   inRange: {
        //     color: [
        //     '#313695',
        //   '#4575b4',
        //   '#74add1',
        //   '#fdae61',
        //   '#f46d43',
        //   '#d73027',
        //   '#a50026'
        //     ]
        //   },
        //   text: ['High', 'Low'],
        //   calculable: true
        // },
        // 地图的阴影底图
        geo: {
          map: "anhui",
          zoom: 1.2,
          top: "15px",
          roam: false,
          layoutCenter: ["50%", "50%"], //位置
          layoutSize: "80%", //大小
          itemStyle: {
            normal: {
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#09132c", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#274d68", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
              borderWidth: 6, //设置外层边框
              borderColor: "rgba(66, 199, 222,1)",
              shadowColor: "rgb(59, 11, 62)",
              shadowOffsetX: 10,
              shadowOffsetY: 11,
            },
          },
        },
        series: [
          {
            type: "map",
            map: "anhui",
            top: "50px",
            // aspectScale: 0.9,
            // layoutCenter: ["50%", "50%"], //地图位置
            // layoutSize: "100%",
            layoutCenter: ["50%", "50%"], //位置
            layoutSize: "80%", //大小
            zoom: 1.2,
            label: {
              normal: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "12",
               color: "#fff",
              },
              emphasis: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "12",
               color: "#fff",
              },
            },
            itemStyle: {
              areaColor: "rgba(5, 107, 158, 1)",
              color: "#2B5890", //地图颜色
              // borderWidth: 2, //分界线wdith
              // borderColor: "#000", //分界线颜色
              borderColor: "rgba(9, 13, 63,1)",
              borderWidth: 1,
              emphasis: {
                show: true,
                areaColor: "#ff7200", //鼠标滑过区域颜色
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
            },
            // zlevel: 1,
            data: that.data,
          },
        ],
      };
      that.$nextTick(() => {
        let myChart = that.$echarts.init(document.getElementById(id));
        if(myChart.getOption()){
          myChart.dispose();
          myChart = that.$echarts.init(document.getElementById(id));
        }
        that.regionsdata = [];
        that.$echarts.registerMap("anhui", that.dataMap);
        myChart.clear();
        console.log(that.data, "地图下钻数据");
        myChart.setOption(options);
        myChart.resize();
        myChart.off("dblclick");
        myChart.on("dblclick", (data) => {
          this.changeMap(data.data, data.name);
        });
        myChart.on("mousemove", (param) => {
          if (!param.data) return;
          // that.mapbar("mapbar", param.data);
        });
        tools.loopShowTooltip(
          myChart,
          options,
          {
            loopSeries: true,
          },
          this
        );
      });
    },
    // 趋势分析
    lineInit(id) {
      let myChart = this.$echarts.init(document.getElementById(id));
      let xData = this.trendLicenseNum.map((k) => k.year);
      let CapacityData = this.trendLicenseNum.map((k) => k.license_num);
      // 持证户数当年 取持证零售户户数
      // CapacityData[CapacityData.length - 1] = this.NewZjzl.listOne[0].num;
      let upLimitData = this.trendLicenseNum.map((k) => k.upper_limit);
      let lowLimitData = this.trendLicenseNum.map((k) => k.lower_limit);
      let yData = {
        min: formatMinNum(Math.min(...lowLimitData), 2),
        max: formatMaxNum(Math.max(...upLimitData), 2),
        // interval: 20,
      };
      // console.log(yData, "============================================");
      // let seriesData = [30, 80, 90, 80, 40, 50, 60, 70, 70, 60, 50, 40];
      let option = {
        // backgroundColor: "#fff",
        color: ["#157DFF", "#F7B500", "#5FD77E"],
        legend: {
          right: 10,
          top: 10,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return (
              "<div>" +
              params[0].name +
              "年" +
              "<br>" +
              params[0].marker +
              params[0].seriesName +
              "(户):" +
              '<span style="color: #333;">' +
              params[0].value +
              "</span>" +
              "<br>" +
              params[1].marker +
              params[1].seriesName +
              "(户):" +
              '<span style="color: #333;">' +
              params[1].value +
              "</span>" +
              "<br>" +
              params[2].marker +
              params[2].seriesName +
              "(户):" +
              '<span style="color: #333;">' +
              params[2].value +
              "</span>" +
              "</div>"
            );
          },
        },
        // grid: {
        //   top: 100,
        //   containLabel: true,
        // },
        grid: {
          left: "5%",
          right: "0",
          bottom: "0",
          top: "30%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData,
          axisLabel: {
            interval: 0, //X轴信息全部展示
          },
          axisPointer: {
            type: "shadow",
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,0.7)", //X轴字体颜色
              fontSize: "12",
            },
          },
          // axisTick: {
          // show: false, //去掉图表横纵坐标轴刻度线
          // },
        },
        yAxis: {
          type: "value",
          name: "单位：户",
          min: yData.min,
          max: yData.max,
          nameTextStyle: {
            color: "rgba(255, 255, 255, 0.5)",
            fontSize: 12,
          },
          // interval: yData.interval,
          axisLabel: {
            formatter: "{value}",
            interval: 2, //X轴信息全部展示
            textStyle: {
              color: "rgba(255,255,255,0.7)", //Y轴内容文字颜色
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(66, 164, 255, 0.3)", //y轴
              type: "solid",
              // fontSize: '12',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "rgba(66, 164, 255, 0.3)", //里面横着的虚线
            },
          },
        },
        series: [
          {
            name: "持证户数",
            type: "line",
            smooth: false,
            // showSymbol: false,/
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: "#157DFF",
                // type:'dot'
              },
            },
            data: CapacityData,
          },
          {
            name: "上限",
            type: "line",
            smooth: false,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                type: "dotted",
                color: "#5FD77E",
              },
            },
            data: upLimitData,
          },
          {
            name: "下限",
            type: "line",
            smooth: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                type: "dotted",
                color: "#F7B500",
              },
            },
            data: lowLimitData,
          },
        ],
      };
      myChart.showLoading();
      this.$nextTick(() => {
        myChart.setOption(option, true);
        myChart.resize();
        myChart.hideLoading();
      });
    },
    // 5+5
    lineInit2(id) {
      let myChart = this.$echarts.init(document.getElementById(id));
      // let xData = ["许可决定", "专卖入网", "营销入网", "物流入网"];
      let xData = ["许可决定", "营销入网"];
      let yData = {
        min: 0,
        max: 6,
        interval: 1,
      };
      let seriesData = [1, 2];
      let option = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return (
              "<div>" +
              params[0].name +
              "(天):" +
              '<span style="color: #333;">' +
              params[0].value +
              "</span>" +
              "</div>"
            );
          },
        },
        grid: {
          left: "5%",
          right: "0",
          bottom: "0",
          top: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData,
          axisLabel: {
            interval: 0, //X轴信息全部展示
          },
          axisPointer: {
            type: "shadow",
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,0.7)", //X轴字体颜色
              fontSize: "12",
            },
          },
          // axisTick: {
          //   show: false, //去掉图表横纵坐标轴刻度线
          // },
        },
        yAxis: {
          type: "value",
          name: "单位：天",
          min: yData.min,
          max: yData.max,
          nameTextStyle: {
            color: "rgba(255, 255, 255, 0.5)",
            fontSize: 12,
          },
          interval: yData.interval,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "rgba(255,255,255,0.7)", //Y轴内容文字颜色
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(66, 164, 255, 0.3)", //y轴
              type: "solid",
              // fontSize: '12',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "rgba(66, 164, 255, 0.3)", //里面横着的虚线
            },
          },
        },
        series: [
          {
            // name: "销售额",
            type: "bar",
            data: this.fiveData.map((k) => {
              if (k > 5) {
                return {
                  value: k,
                  itemStyle: {
                    color: "rgb(144, 70, 105)",
                  },
                };
              }
              return k;
            }), // 这里是您的数据
            itemStyle: {
              normal: {
                color: "rgb(35, 114, 155)",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 16,
                  },
                },
              },
            },
            lineStyle: {
              color: "rgb(66, 199, 222)",
            },
            markLine: {
              symbol: "none",
              // label: {
              //   position: "end",
              //   formatter: "2.5日",
              // },
              data: [
                {
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    // type:"solid",
                    color: "rgba(203, 69, 94)",
                  },
                  name: "平均天数5",
                  yAxis: 5,
                },
              ],
            },
          },
        ],
      };
      myChart.showLoading();
      this.$nextTick(() => {
        myChart.setOption(option, true);
        myChart.resize();
        myChart.hideLoading();
      });
    },
    //好差评图标
    barInit(id) {
      var that = this;
      let myChart = this.$echarts.init(document.getElementById(id));
      // let DataName = ["国办", "政务服务网", "线下"];
      let DataName = ["国办"]; //只要国办
      let xData = ["非常满意", "基本满意", "非常不满意"];
      // let OneData = [that.veryGoodNumber, data.goodNumber, data.badNumber];
      // let TwoData = [49, 32, 2];
      // let ThrData = [9, 2, 4];
      let yData = {
        min: formatMinNum(Math.min(...that.goodBadData)),
        max: formatMaxNum(Math.max(...that.goodBadData), 2),
      };
      let option = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return (
              "<div>" +
              params[0].name +
              "<br>" +
              params[0].marker +
              params[0].seriesName +
              "(次):" +
              '<span style="color: #333;">' +
              params[0].value +
              "</span>" +
              "</div>"
            );
          },
        },
        legend: {
          data: DataName,
          icon: "circle",
          right: 10,
          top: 1,
          textStyle: {
            fontSize: "12",
            color: "rgba(255,255,255,0.7)",
          },
        },
        grid: {
          left: "10%",
          right: "0",
          bottom: "5%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisPointer: {
              type: "shadow",
            },
            // boundaryGap: false, //让x轴坐标从紧挨着y轴开始
            // 坐标轴线
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.7)", //X轴字体颜色
                fontSize: "12",
              },
            },
            axisTick: {
              show: false, //去掉图表横纵坐标轴刻度线
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：次",
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.5)",
              fontSize: 12,
            },

            // min: yData.min,
            // max: yData.max,
            // interval: 50,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "rgba(255,255,255,0.7)", //Y轴内容文字颜色
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(66, 164, 255, 0.3)", //y轴
                type: "solid",
                // fontSize: '12',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "rgba(66, 164, 255, 0.3)", //里面横着的虚线
              },
            },
          },
        ],
        series: [
          {
            name: DataName[0],
            type: "bar",
            data: that.goodBadData,
            barWidth: "30",
            // seriesLayoutBy: 'row',
            itemStyle: {
              // barBorderRadius: [10, 10, 0, 0],
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(1, 177, 255, 0.7)",
                    }, //第一顶部颜色
                    {
                      offset: 1,
                      color: "rgba(3, 59, 255, 0.7)",
                    }, //第一底部颜色
                  ],
                },
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 14,
                  },
                },
              },
            },
          },
          // {
          //   name: DataName[1],
          //   type: "bar",
          //   data: TwoData,
          //   barWidth: "12",
          //   //seriesLayoutBy: 'row',
          //   itemStyle: {
          //     barBorderRadius: [30, 30, 0, 0],
          //     color: {
          //       x: 0,
          //       y: 0,
          //       x2: 1,
          //       y2: 1,
          //       colorStops: [
          //         {
          //           offset: 0,
          //           color: "rgba(197, 174, 52, 1)",
          //         }, //第二顶部颜色
          //         {
          //           offset: 1,
          //           color: "rgba(111, 120, 75, 1)",
          //         }, //第二底部颜色
          //       ],
          //     },
          //   },
          // },
          // {
          //   name: DataName[2],
          //   type: "bar",
          //   data: ThrData,
          //   barWidth: "12",
          //   //seriesLayoutBy: 'row',
          //   itemStyle: {
          //     barBorderRadius: [30, 30, 0, 0],
          //     color: {
          //       x: 0,
          //       y: 0,
          //       x2: 1,
          //       y2: 1,
          //       colorStops: [
          //         {
          //           offset: 0,
          //           color: "rgba(191, 67, 94, 1)",
          //         }, //第三顶部颜色
          //         {
          //           offset: 1,
          //           color: "rgba(118, 62, 99, 1)",
          //         }, //第三底部颜色
          //       ],
          //     },
          //   },
          // },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //咨询投诉
    barInit2(id) {
      console.log('咨询投诉数据',this.complainData);
      var that = this;
      let myChart = this.$echarts.init(document.getElementById(id));
      let DataName = ["总数", "查实", "超期", "处置率"];
      // let xData = ["5月", "6月", "7月", "8月", "9月"];
      // let OneData = [492, 496, 532, 535, 468];
      // let TwoData = [23, 23, 29, 25, 14];
      // let ThrData = [5, 4, 9, 5, 3];
      // let rateData = [98.98, 99.19, 98.31, 99.07, 99.36];
      let yData = {
        min: formatMinNum(Math.min(...that.complainData.totalityNumber)),
        max: formatMaxNum(Math.max(...that.complainData.totalityNumber), 2),
        // interval: 20,
      };
      let length = that.complainData.month.length;
      let option = {
        // tooltip: {
        //   show: true,
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "cross",
        //     crossStyle: {
        //       color: "#666",
        //     },
        //   },
        // },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return (
              "<div>" +
              params[0].name +
              "<br>" +
              params[0].marker +
              params[0].seriesName +
              "(个):" +
              '<span style="color: #333;">' +
              params[0].value +
              "</span>" +
              "<br>" +
              params[1].marker +
              params[1].seriesName +
              "(个):" +
              '<span style="color: #333;">' +
              params[1].value +
              "</span>" +
              "<br>" +
              params[2].marker +
              params[2].seriesName +
              "(个):" +
              '<span style="color: #333;">' +
              params[2].value +
              "</span>" +
              "</div>"
            );
          },
        },
        legend: {
          data: DataName,
          // icon: "circle",
          right: 0,
          top: 0,
          textStyle: {
            fontSize: "10",
            color: "rgba(255,255,255,0.7)",
          },
        },
        grid: {
          left: "10%",
          right: "0",
          bottom: "0",
          top: "30%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // data: that.complainData.month.splice(length - 5, length),
            data: that.complainData.month,
            axisPointer: {
              type: "shadow",
            },
            // boundaryGap: false, //让x轴坐标从紧挨着y轴开始
            // 坐标轴线
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.7)", //X轴字体颜色
                fontSize: "12",
              },
            },
            //         //文字样式
            // axisLabel: {
            //          show: true,
            //          textStyle: {
            //             color: '#595C61'
            //          },
            //          formatter:function(value){
            // 		return value.split("").join("\n");
            // 	 }
            //     },
            axisTick: {
              show: false, //去掉图表横纵坐标轴刻度线
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：个",
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.5)",
              fontSize: 12,
            },
            // min: yData.min,
            // max: yData.max,
            // interval: 10,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "rgba(255,255,255,0.7)", //Y轴内容文字颜色
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(66, 164, 255, 0.3)", //y轴
                type: "solid",
                // fontSize: '12',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "rgba(66, 164, 255, 0.3)", //里面横着的虚线
              },
            },
          },
          {
            type: "value",
            name: "单位：%",
            position: "right",
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.5)",
              fontSize: 12,
            },
            // inverse: true,
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "rgba(255,255,255,0.7)", //Y轴内容文字颜色
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(66, 164, 255, 0.3)", //y轴
                type: "solid",
                // fontSize: '12',
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "solid",
                color: "rgba(66, 164, 255, 0.3)", //里面横着的虚线
              },
            },
          },
        ],
        series: [
          {
            name: DataName[0],
            type: "bar",
            // data: that.complainData.totalityNumber.splice(length - 5, length),
            data: that.complainData.totalityNumber,
            barWidth: "12",
            // seriesLayoutBy: 'row',
            itemStyle: {
              // barBorderRadius: [30, 30, 0, 0],
              color: {
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(1, 177, 255, 0.7)",
                  }, //第一顶部颜色
                  {
                    offset: 1,
                    color: "rgba(3, 59, 255, 0.7)",
                  }, //第一底部颜色
                ],
              },
            },
          },
          {
            name: DataName[1],
            type: "bar",
            // data: that.complainData.verifyNumber.splice(length - 5, length),
            data: that.complainData.verifyNumber,
            barWidth: "12",
            //seriesLayoutBy: 'row',
            itemStyle: {
              // barBorderRadius: [30, 30, 0, 0],
              color: {
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(197, 174, 52, 1)",
                  }, //第二顶部颜色
                  {
                    offset: 1,
                    color: "rgba(111, 120, 75, 1)",
                  }, //第二底部颜色
                ],
              },
            },
          },
          {
            name: DataName[2],
            type: "bar",
            // data: that.complainData.overTimeNumber.splice(length - 5, length),
            data: that.complainData.overTimeNumber,
            barWidth: "12",
            //seriesLayoutBy: 'row',
            itemStyle: {
              // barBorderRadius: [30, 30, 0, 0],
              color: {
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 67, 94, 1)",
                  }, //第三顶部颜色
                  {
                    offset: 1,
                    color: "rgba(118, 62, 99, 1)",
                  }, //第三底部颜色
                ],
              },
            },
          },
          // 折线图
          {
            name: DataName[3],
            type: "line",
            // smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 5,
            yAxisIndex: 1,
            // data: that.complainData.czlNumber.splice(length - 5, length),
            data: that.complainData.czlNumber,
            itemStyle: {
              normal: {
                color: "rgb(66, 199, 222)",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    toggleBtn(i) {
      // 零售许可容量按钮
      this.activeRlxkIndex = i;
      this.$nextTick(() => {
        if (!i) {
          this.pieInit("rl-pie");
        } else {
          this.lineInit("qsfx-line");
        }
      });
    },
    toggleBtn2(i) {
      // 质效评价按钮
      this.activeRlxkIndex2 = i;
      this.$nextTick(() => {
        if (!i) {
          this.barInit("hcp-box");
        } else if (i === 1) {
          // 咨询投诉
          this.barInit2("tsjb-box");
        } else if (i === 2) {
          // 5+5
          this.lineInit2("five-and-five-box");
        }
      });
    },
    // 综合管理按钮
    toggleBtn3(i) {
      this.activeZhglIndex = i;
      this.$nextTick(() => {
        if (!i) {
          setTimeout(()=>{
            this.barInit("hcp-box");
          },100)
        } else if (i === 1) {
          setTimeout(()=>{
            this.initpie();
          },100)
        }
      });
    },
    // 对标按钮
    toggleBtn4(i) {
      this.activeDbIndex = i;
      this.$nextTick(() => {
        if (!i) {
          this.initDbOneBar();
        } else if (i === 1) {
          // this.initpie();
          this.initDbTwoBar();
        }
      });
    },
    initDbTwoBar() {
      let that = this;
      let myChart = that.$echarts.init(document.getElementById("db-two-bar"));
      let XData = [];
      let YData = [];

      that.dbNum.forEach((item) => {
        XData.push(item?.org_name);
        let ydata = item?.license_radio;
        if(item?.org_name=='安徽') ydata = that.lsxkrl.rlList[2].num;
        if(item?.org_name=='全国') ydata = that.lsxkrl.rlList[3].num;
        YData.push(ydata);
      });

      let option = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
         
            return (
              "<div>" +
              params[0].name +
              "<br>" +
              params[0].marker +
              params[0].seriesName +' '+
              '<span style="color: #333;">' +
              params[0].value + '‰'+
              "</span>" +
              "</div>"
            );
          },
        },

        grid: {
          left: "5%",
          right: "5%",
          bottom: "10%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: XData,
            axisPointer: {
              type: "shadow",
            },
            // boundaryGap: false, //让x轴坐标从紧挨着y轴开始
            // axisLabel: {
            //   formatter: function (value) {
            //     return value.split("").join("\n");
            //   },
            // },
            axisLabel: {
            interval: 0, //X轴信息全部展示
            formatter: (value, index) => {
                let str=''
                if(value.length>5){
                  str= value.slice(0,3)
                }else{
                  str=value
                }
                return str.split("").join("\n");
            },

          },
            // 坐标轴线
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.7)", //X轴字体颜色
                fontSize: "12",
              },
            },
            axisTick: {
              show: false, //去掉图表横纵坐标轴刻度线
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：‰",
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.5)",
              fontSize: 12,
            },

            // min: 0,
            // max: 40,
            interval:  that.titleMap.level==1 ? 1:2,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "rgba(255,255,255,0.7)", //Y轴内容文字颜色
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(66, 164, 255, 0.3)", //y轴
                type: "solid",
                // fontSize: '12',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "rgba(66, 164, 255, 0.3)", //里面横着的虚线
              },
            },
          },
        ],
        series: [
          {
            name: '商户率',
            type: "bar",
            data: YData,

            // seriesLayoutBy: 'row',
            itemStyle: {
              normal: {
                // barBorderRadius: [30, 30, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: that.titleMap.level==1?14:8,
                  },
                },
                color: {
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(61, 185, 210, 1)",
                    }, //第一顶部颜色
                    {
                      offset: 1,
                      color: "rgba(42, 126, 159, 0.8)",
                    }, //第一底部颜色
                  ],
                },
              },
            },
          },
        ],
      };
      myChart.showLoading();
      // 初始化地图
      myChart.setOption(option, false);
      myChart.resize();
      myChart.hideLoading();
    },
    getNowDate() {
      const timeOne = new Date();
      const year = timeOne.getFullYear();
      let month = timeOne.getMonth() + 1;
      let day = timeOne.getDate();
      day = day < 10 ? "0" + day : day;
      const time = `${year}-${month}-${day}`;
      return time;
    },
    formatterCustom(data) {
      return `<div class="content">

<div class="info siAze">

<span class="infoText">持证零售户:</span>

<span class="infoNum Qcc">${data?.value || 0}</span>

<span class="infoUnit">户</span>

</div>
        <div class="info siAze">

<span class="infoText ">电子烟零售户:</span>

<span class="infoNum Qcc">${data?.value1 || 0}</span>

<span class="infoUnit">户</span>

</div>
        <div class="info siAze">

<span class="infoText">正常经营户:</span>

<span class="infoNum Qcc">${data?.value2 || 0}</span>

<span class="infoUnit">户</span>

</div>

</div>`;
    },
    //鼠标滑过效果
    bgqihuan(index) {
      this.currentIndex = index;
      if (index == 0) {
        this.showWhat = "echartsbar";
      } else if (index == 1) {
        this.showWhat = "tousu";
      } else {
        this.showWhat = "xuke";
      }
    },

    //鼠标滑过效果
    bgqihuan2(index) {
      this.currentIndex2 = index;
      this.showone = !index;
    },

    //饼图
    initpie() {
      let that = this;
      let mychart = this.$echarts.init(document.getElementById("echartsPie"));

      // that.groupTypeTot =that.chartData.reduce((prev, cur) => prev + cur.num, 0) - that.chartData[0].num;
      that.groupTypeTot =that.chartData.reduce((prev, cur) => prev + cur.num, 0);
      let option = {
        // color: [
        //   "rgba(66, 199, 222,0.7)",
        //   "rgba(1, 88, 233,0.7)",
        //   "rgba(195, 96, 4,0.7)",
        //   "rgba(4, 195, 117,0.7)",
        //   "rgba(211, 185, 49,0.7)",
        //   "rgba(203, 69, 94,0.7)",
        //   "rgba(45, 146, 181,0.7)",
        //   "rgba(152, 0, 241,0.7)",
        // ],
        color: [
          "#CB455E",
          "#0158E9",
          "#D3B931",
          "#04C375",
          "#C36004",
          "#4951FF",
          "#42C7DE",
          "#168D6F",
          "#15ABFF",
        ],
        // title: {
        //   // top: 50,
        //   left: "13%",
        //   top: "35%",
        //   text: txt,
        //   x: "center",
        //   y: "center",
        //   subtext: "总户数",
        //   textStyle: {
        //     color: "#34EFFE",
        //     fontSize: 20,
        //     // fontWeight: 600,
        //   },
        //   subtextStyle: {
        //     color: "#fff",
        //     fontSize: 14,
        //   },
        //   textAlign: "center",
        // },
        legend: {
          // orient: "vertical",
          // top: "10%",
          // left: "0",
          // itemWidth: 15,
          // itemHeight: 15,
          // data: chartData ? chartData.map((it) => {
          //     console.log('it::::::')
          //     console.log(it)
          //     return it.type;
          // }) : [],
          // textStyle: {
          //   fontSize: 12,
          //   color: "#fff",
          //   rich: {
          //     title: {
          //       // color:'#34EFFE'
          //       color: "#fff",
          //     },
          //   },
          // },

          // bottom: "5%",
          left: "35%",
          height: "80%",
          top: "10%",
          orient: "vertical",
          textStyle: {
            color: "#fff",
            rich: {
              title: {
                color: "#34EFFE",
                fontWeight: 600,
              },
            },
          },

          formatter: function (name) {
            return (
              name +
              `{title| ${
                that.chartData.find((k) => k.specialName === name).num
              }}`
            );
          },
        },
        // tooltip: {
        //   trigger: "item",
        //   formatter: function (params) {
        //     let tot = 0;
        //     let zhanbi = 0;
        //     that.chartData.forEach((val) => {
        //       tot += val.num;
        //     });
        //     zhanbi = ((params.value / tot) * 100).toFixed(2) + "%";
        //     let str = `占比：${zhanbi}<br/>${params.seriesName}<br/>${params.marker}${params.data.title}:${params.data.value}`;
        //     return str;
        //   },
        // },
        tooltip: {
          show: true,
          formatter: function (params) {
            let tot = 0;
            let zhanbi = 0;
            that.chartData.forEach((val) => {
              tot += val.num;
            });
            zhanbi = ((params.value / tot) * 100).toFixed(2) + "%";
            return (
              params.name +
              // "<br/> " +
              // params.marker +
              // params.seriesName +
              ": " +
              zhanbi
            );
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            // radius: ["70%", "95%"],
            radius: '85%',
            center: ["15%", "48%"],
            // roseType: "radius",
            clockwise: false,
            label: {
              normal: {
                show: false,
                position: "outside",
                fontSize: 14,
              },
            },
            labelLine: {
              show: false,
              smooth: true,
            },
            data: that.chartData.length
              ? that.chartData.map((it) => {
                  return {
                    name: it.specialName,
                    value: it.num,
                    title: it.specialName,
                  };
                })
              : [],
          },
        ],
      };

      mychart.setOption(option);
      mychart.off("legendselectchanged");
      mychart.on("legendselectchanged", function (obj) {
        let selectArr = [];
        for (const key in obj.selected) {
          if (obj.selected[key]) {
            selectArr.push(key);
          }
        }

        let result = 0;

        selectArr.forEach((k) => {
          that.chartData.forEach((cur) => {
            if (k === cur.specialName) {
              result += cur.num;
            }
          });
        });
        that.groupTypeTot = result;
      });
    },
    //容量图
    pieInit(id) {
      let myChart = this.$echarts.init(document.getElementById(id));
      let txt = {
        "rl-pie": this.lsxkrl.licCapacity ? this.lsxkrl.licCapacity : "-",
        pie2: this.NewDzyjy.saturationRadio,
        pie3: this.NewDzyjy.normalBusinessNumRadio,
      };
      let text = {
        "rl-pie": "合理容量饱和度",
        pie2: "饱和率",
        pie3: "正常经营率",
      };
      console.log(this.lsxkrl.licCapacity, "===========txt[id]");
      let option = {
        title: {
          top: 50,
          text: text[id],
          subtext: txt[id] + (txt[id] === "-" ? "" : "%"),
          x: "center",
          y: "center",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          subtextStyle: {
            color: "#42c7de",
            fontSize: 20,
            fontWeight: 600,
          },
        },
        color: "rgba(255,255,255,.3)",

        series: [
          {
            type: "pie",
            clockWise: true,
            radius: id === "rl-pie" ? ["100%", "80%"] : ["100%", "75%"],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            data: [
              {
                value: txt[id],
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: id === "pie3" ? "#066f5a" : "#42c6dd", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: id === "pie3" ? "#05ae6e" : "#3e8baa", // 100% 处的颜色
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                value: 100 - txt[id],
              },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //进度条
    jindtutiao() {
      let myChart = this.$echarts.init(document.getElementById("jindutiao"));
      var txt = 44.17;
      let option = {
        title: {
          top: 35,
          text: txt + "%",
          subtext: "饱和率",
          x: "center",
          y: "center",
          textStyle: {
            color: "#fff",
            fontSize: "12",
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        color: "rgba(255,255,255,.3)",

        series: [
          {
            type: "pie",
            clockWise: true,
            radius: ["90%", "75%"],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            data: [
              {
                value: txt,
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#00cefc", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#367bec", // 100% 处的颜色
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                value: 100 - txt,
              },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    jindtutiaotwo() {
      let myChart = this.$echarts.init(document.getElementById("jindutiaotwo"));
      var txt = 61.09;
      let option = {
        title: {
          text: txt + "%",
          subtext: "正常经营率",
          x: "center",
          y: "center",
          top: 35,
          textStyle: {
            color: "#fff",
            fontSize: "12",
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        color: "rgba(255,255,255,.3)",

        series: [
          {
            type: "pie",
            clockWise: true,
            radius: ["90%", "75%"],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            data: [
              {
                value: txt,
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#00cefc", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "yellow", // 100% 处的颜色
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                value: 100 - txt,
              },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    getTime() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();
      // const str = ''
      // if (this.hour > 12) {
      //     this.hour -= 12;
      //     this.str = " AM";
      // } else {
      //     this.str = " PM";
      // }
      this.month = check(month);
      this.day = check(day);
      this.hour = check(hour);
      this.minute = check(minute);
      this.second = check(second);

      function check(i) {
        const num = i < 10 ? "0" + i : i;
        return num;
      }
      //  this.nowDate = year + "年" + this.month + "月" + this.day + "日";
      this.nowTime =
        year +
        "年" +
        this.month +
        "月" +
        this.day +
        "日 " +
        this.hour +
        ":" +
        this.minute +
        ":" +
        this.second;
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
    }
  },
};
</script>

<style lang="scss">
.db-box {
  width: 100%;
  height: 200px;
  padding:0px 35px;
  // margin:0 0 10px 0;
  // border: 1px solid red;
}
// .dv-scroll-board .rows .row-item {
//   background: url(../../assets/xzxk-new/blqk/zq-num-bg.png) !important;
//   background-size: 100% 100%;
// }
// .blqk-pop {
//   background: url(../../assets/qjzl-new/new/late-uncheck-pop.png);
//   background-size: 100% 100%;
// }
.el-popover {
  background: none;
  border: none;
}

.el-popper[x-placement^="top"] .popper__arrow {
  display: none;
}
</style><style lang="scss" scoped>
@import "../../assets/scss/qjzl.scss";
.qjzlright .zjzl-box .main {
  margin-top: 0;
  padding: 0 35px;
}
.retail-format {
  width: 100%;
  height: 130px;
  position: relative;
  .lm-top {
    width: 100%;
    height: 25px;
    background: url(../../assets/qjzl-new/xzxk/lsyt-title.png);
    background-size: 100% 100%;
  }
  .lm-center {
    position: relative;
    width: 100%;
    // height: 188px;
    margin: 0 auto;
    // background: url(../../assets/scjg-new/lsyt/bg.png);
    // background-size: 100% 100%;
    background-origin: border-box;
    padding: 10px 10px 0 10px;
    .intro1 {
      position: absolute;
      top: 88px;
      left: -55px;
      z-index: 1000;
    }
    .intro2 {
      position: absolute;
      top: 115px;
      left: -63px;
      z-index: 1000;
    }
    .intro3 {
      position: absolute;
      top: 137px;
      right: 90px;
      z-index: 1000;
    }
    .intro4 {
      position: absolute;
      top: 90px;
      left: 143px;
      z-index: 1000;
    }
    .intro5 {
      position: absolute;
      top: 115px;
      right: 0;
      z-index: 1000;
    }
    .intro6 {
      position: absolute;
      top: 138px;
      left: 100px;
      z-index: 1000;
    }
  }
}
.qjzlleft {
  width: 460px;
}
.zxpj-box {
  .five-box {
    position: relative;
    .hoverpointer {
      display: flex;
    }
    .num {
      display: flex;
      justify-content: end;
      z-index: 2;
      position: absolute;
      top: 0px;
      left: 12px;
      .area {
        display: flex;
      }
      ::v-deep .el-input__inner {
        // color: "#fff" !important;
        width: 100px !important;
        height: 20px !important;
        // background-color: rgb(9, 18, 69) !important;
      }
      ::v-deep .el-input__icon {
        line-height: 20px !important;
      }
    }
  }
}
.lftopdiv {
  height: 165px;
}

.lftopdivyi {
  width: 457px;
  height: 600px;
  background: url(../../assets/qjzl/lftopdiv1.png);
  background-size: 100% 100%;
  padding: 20px 16px 18px 16px;
  position: relative;
}

.lftopdivyi::after {
  content: "";
  display: block;
  width: 100%;
  height: 15px;
  background: url(../../assets/qjzl/lftopdiv1bot.png);
  background-size: 100% 100%;
  position: absolute;
  bottom: -0.5%;
  left: 0%;
}

.rightyopbulli {
}

.cenmap {
  height: 450px;
  background: red;
}

.centerbotdiv-box {
  display: flex;
}

.bottom-title-box {
  display: flex;
}

.centerbotdiv2 {
  position: relative;
  // background: url(../../assets/qjzl/centerbotbg.png);
  background-size: 100% 100%;
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 96%;
    height: 96%;
  }

  .btnisnan {
    position: absolute;
    top: 0;
  }
}

.centerbotdiv {
  height: 290px;
  background: url(../../assets/qjzl/centerbotbg.png);
  background-size: 100% 100%;
  padding: 6px 24px 15px 24px;
  position: relative;
}

.centerbotdiv::after {
  content: "";
  display: block;
  width: 100%;
  height: 15px;
  background: url(../../assets/qjzl/centerlinebot.png);
  background-size: 100% 100%;
  position: absolute;
  bottom: -2.5%;
  left: 0%;
}

.rightyopayi {
  height: 480px;
  background: url(../../assets/qjzl/rightyopa.png);
  background-size: 100% 100%;
  padding: 16px 12px 3px 15px;
  margin-top: -7px;
  position: relative;

  p {
    width: 100%;
    height: 36px;
    line-height: 36px;

    .leftpingpai {
      float: left;
      font-size: 14px;
      // font-family: Source Han Sans CN;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #ffffff;
      margin-left: 15px;
    }

    .righu {
      float: right;
      font-size: 14px;
      // font-family: Source Han Sans CN;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #ffffff;
      margin-right: 15px;
    }

    i {
      font-style: normal;
      margin-right: 10px;
      font-size: 16px;
      // font-family: Source Han Sans CN;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #34effe;
    }
  }
}

.rightyopayi::after {
  content: "";
  display: block;
  width: 100%;
  height: 15px;
  background: url(../../assets/qjzl/rightlinebot.png);
  background-size: 100% 100%;
  position: absolute;
  bottom: -0.5%;
  left: 0%;
}

.rightyopcyi {
  height: 255px;
  background: url(../../assets/qjzl/rightyopc.png);
  background-size: 100% 100%;
  padding: 17px 12px 3px 15px;
  margin-top: -7px;
  position: relative;
}

.rightyopcyi::after {
  content: "";
  display: block;
  width: 100%;
  height: 15px;
  background: url(../../assets/qjzl/rightlinebot.png);
  background-size: 100% 100%;
  position: absolute;
  bottom: -2.5%;
  left: 0%;
}

.bgcolors {
  background: url(../../assets/img/bgline.png);
  background-size: 100% 100%;
}

.listdian {
  width: 100%;
  height: 87%;
  margin-top: 5%;
  margin-left: 10px;

  img: {
    float: left;
  }

  p {
    float: right;
    width: 80%;
    height: 25px;
    margin-top: 3%;
    background: url(../../assets/img/bookss.png);
    background-size: 100% 100%;
    line-height: 25px;

    .leftpingpai {
      float: left;
      font-size: 14px;
      // font-family: Source Han Sans CN;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #ffffff;
      margin-left: 15px;
    }

    .righu {
      float: right;
      font-size: 14px;
      // font-family: Source Han Sans CN;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #ffffff;
      margin-right: 15px;
    }

    i {
      font-style: normal;
      margin-right: 10px;
      font-size: 16px;
      // font-family: Source Han Sans CN;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #34effe;
    }
  }
}

#jindutiao {
  margin-left: 20%;
}

#jindutiaotwo {
  margin-left: 20%;
}

.btnisnan {
  width: 100%;
  height: 50px;
  margin-top: 2%;
}

.btnisnan {
  ul {
    .isactive {
      background: url(../../assets/img/hover.png);
      background-size: 100% 100%;
    }

    li {
      width: 13%;
      height: 30px;
      list-style: none;
      float: left;
      font-size: 12px;
      margin-left: 4%;
      line-height: 30px;
      background: url(../../assets/img/btnhover.png);
      background-size: 100% 100%;
      text-align: center;
      cursor: pointer;
    }

    li:hover {
      background: url(../../assets/img/hover.png);
      background-size: 100% 100%;
    }
  }
}

::v-deep .siAze {
  margin: 10px;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;

  .Qcc {
    color: rgba(52, 239, 254, 1);
    font-size: 21px;
  }
}

.boxgrond {
  width: 470px;
  height: 193px;
  background: url(../../assets/img/border.png);
  background-size: 100% 100%;
  margin-bottom: -40px;
  margin-left: -40px;
  position: relative;

  .hoverbox {
    width: 250px;
    height: 30px;
    background: url(../../assets/img/jindutiao.png);
    background-size: 100% 100%;
    margin-left: 15%;
    margin-top: 10%;
    position: absolute;
    left: 15px;
    top: 45px;
    color: #fff;

    ul {
      width: 100%;
      list-style: normal;

      li {
        float: left;
        font-size: 12px;
      }
    }
  }

  .titleti {
    width: 85%;
    height: 25px;
    line-height: 25px;
    padding-left: 10px;
    background: #083f81;
    margin-left: 7%;
    font-size: 14px;
    position: absolute;
    left: 0;
    top: 35px;
    color: #fff;
  }
}
.annotation{
  width: 180px;
  position: absolute;
  bottom:60px;
  left: 40px;
  font-size: 16px;
}
</style>
